ant-design-vue之FormModel表单自定义验证

Posted 2020-12-10 codexlx

这里使用的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中：

data(){
    // 手机格式验证
    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();
        }
      }
    };

    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就无法获取到值（这个问题困扰了我半天）。

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!‘);）。否则执行下面的操作