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},
    ]
 }