uni-app
uni-app copied to clipboard
vue3 uni-forms 校验无效,uni-forms的created不执行。
trafficstars
<template>
<view class="p-[30rpx]">
<view class="box-card">
<uni-forms ref="valiFormRef" :rules="rules" :modelValue="valiFormData">
<uni-forms-item label="姓名" required name="name">
<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="年龄" required name="age">
<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
</uni-forms-item>
<uni-forms-item label="自我介绍" name="introduction">
<uni-easyinput
type="textarea"
v-model="valiFormData.introduction"
placeholder="请输入自我介绍"
/>
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submitForm()">提交</button>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const valiFormRef = ref(null)
const valiFormData = ref({
name: '22',
age: '',
introduction: ''
})
const rules = ref({
name: {
rules: [
{
required: true,
errorMessage: '姓名不能为空'
}
]
},
age: {
rules: [
{
required: true,
errorMessage: '年龄不能为空'
},
{
format: 'number',
errorMessage: '年龄只能输入数字'
}
]
}
})
const submitForm = async () => {
console.log(`output->formData。value`, valiFormRef.value)
valiFormRef.value
.validate()
.then((res) => {
console.log('success', res)
uni.showToast({
title: `校验通过`
})
})
.catch((err) => {
console.log('err', err)
})
}
</script>
<style lang="scss" scoped></style>
我这边上面的代码 用vue3工程没有复现问题,forms可以正常校验。 尝试升级一下最新版本,或提供一下demo工程
已经收到您的来信,我会尽快回复。
长时间未响应,关闭本issue。 如还有问题,可 reopen issue 继续讨论。
已经收到您的来信,我会尽快回复。