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==>没有验证规则

Ant Design Vue表单验证失败

上一篇:循环结构


下一篇:X Window基础三(转)