ant-design-vue之FormModel表單自定義驗證

這里使用的FormModel 表單驗證，它支持 v-model 檢驗(版本：1.5.0+)

1.template中：

<a-form-model
          :label-col="{ span: 3 }" 
          :wrapper-col="{ span: 9 }" 
          :rules="rules"
          :model="ruleForm"
          ref="ruleForm">
      <a-form-model-item 
            label="電話" 
            prop="phone" 
            required 
            has-feedback>
              <a-input 
                   v-model="ruleForm.phone" 
                   placeholder="請輸入電話">
              </a-input>
      </a-form-model-item>                    
</a-form-model>

下面只就表單驗證需要的屬性進行介紹：

 

2.data中：

export default{

// 手機格式驗證 let validatorPhone=(rule,value,callback)=>{ // 如果為空值，就拋出錯誤 if(!value){ callback(new Error("請輸入手機號!")); }else{ // 正則判斷手機號格式的格式，正則判斷失敗拋出錯誤，否則直接callback() if(!/^1[2-9]\d{9}$/.test(value)){ callback(new Error("手機號格式不正確!")); }else{ callback(); } } }
　　data(){
    　　return{
        　　// 表單數據 
        　　ruleForm:{
             　　phone:""
        　　},
        　　// 驗證規則(對應a-form-model上的rules)
        　　rules:{
             　　phone:[{validator:validatorPhone,trigger:"change"}]
　　　　　　　 　　// validator對應手機格式驗證方法（注意必須要有callback）
　　　　　　　 　　// trigger對應觸發驗證的條件。取值有change(表單值改變時觸發)；blur(表單元素失去焦點時觸發)
        　　}
    　　}
　　}  
}          

 

這里需要注意的一點是：rules、ruleForm、a-form-model-item的prop屬性中的phone（屬性名）要一樣，否則validatorPhone中的參數value就無法獲取到值（這個問題困擾了我半天）。

還有另一個坑：ruleForm內的層級關系不能太深，比如a-form-model下的子級a-form-model-item在data中的ruleForm:{}v-model綁定的值，必須在ruleForm對象的子級一層，不能在孫子一級

3.提交按鈕

<a-form-model-item>
     <a-button 
       type="primary"
       size="large"
       @click="submitForm('ruleForm')"
     >保存</a-button>
</a-form-model-item>

 

其中：submitForm('ruleForm')方法是點擊提交時執行的函數，參數'ruleForm'對應<a-form-model>中的ref="ruleForm"。

方法：

submitForm(formName) {this.$refs[formName].validate(valid => {
   if (valid) {
       alert('submit!');
   } else {
       console.log('error submit!!');
       return false;
       }
   });
}

 

當所有表單元素驗證通過的時候執行上面的操作（alert('submit!');）。否則執行下面的操作