el-form 表单非必填验证

el-form 表单非必填验证

在项目中经常会遇到表单数据非必填项，但是需要验证格式的情况，比如电话号码或者邮编。

需要实现效果

当值不填写的时候，可以直接提交，填写的时候，验证格式即可。

代码实现

rules定义验证规则，在form-item中一定要加上prop，不然会没有效果。

<el-form ref="form" :rules="rules">
  <el-form-item label="客户移动电话" prop="fCustomerPhone">
   <el-input v-model="form.fCustomerPhone" placeholder="请输入客户移动电话" />
  </el-form-item>
</el-form>

定义验证规则：输入框有值时进行验证，无值则callback。注意：无值一定要返回callback()，否则便提交不了。这里的电话验证移动电话和座机都可以。

let validatePhone = (rule,value,callback) => {
  if(value){
     if ( /^1/.test( value ) ) {
       if ( /^1\d{10}$/.test( value ) ) {
         callback();
       } else {
         callback( new Error( "请输入11位的手机号" ) );
       }
     } else if ( /^0/.test( value ) ) {
       if ( /^0\d{2,4}-?\d{6,9}$/.test( value ) ) {
         callback();
       } else {
         callback( new Error( "请用0xxx-xxxxxxx格式" ) );
       }
     }else{
       callback( new Error( "请输入11位手机号或0xxx-xxxxxxx格式座机号" ) );
     }
   }else{
   	   callback();
   }
}

rules中required为false，validator引入自定义的验证validatePhone。

rules: {
 fCustomerPhone: [
   { required: false, validator: validatePhone, trigger: "blur"}
  ]
}