Ant Design Vue表单验证失败

表单验证遇见的坑

01

如果你受控数据是这样写的话
const formState= reactive({
    youForm:{
        youNaNe:'',
        useSlectValue: '001',
        date1: undefined,
        delivery: false,
        type: [],
    },
});

那么在视图上绑定需要这样来绑定
:model="formState.youForm" 一定要写成这样
不要写成:model="formState"

<a-form
    ref="formRef"
    :model="formState.youForm"
    :labelCol="{ style: 'width: 100px' }"
>
</a-form>

02

autocomplete="off"
清除input输入框的历史记录;
因为Ant Design Vue中表单会自动记录input框中的值
所以需要我们手动清除

03下拉框中有数值，但是提示请输入

如果遇见这样的情况。因为你下拉框中的数据类型不正确。
如需要的是字符串，但是你传递的是数字

04无法进行验证

01==>没有写name值
02==>name值与 v-model中的值不对应
03==>回填时的值类型不正确
04==>没有验证规则

数据类型不正确

<a-form-item ref="name" label="金额" name="money">
      <a-input-number id="inputNumber"
        v-model:value="formState.money" :min="1" :precision="2" :max="10000" />
</a-form-item>

 验证规则，一定要添加上字符串类型，否者验证规则可能不能够通过哈
 const rules = {
    money: [
         { required: true, message: '请输入', trigger: 'blur' ,type:String},
    ]
 }