vue element-ui的form表单校验总结，动态校验、自定义校验（用正则校验手机号码、数字、url、中文）

写了一段时间的vue，前端用了element-ui，经常会用到from表单，总结一下form表单的校验，以及遇到过的问题。

1. 正常添加校验流程，在form表单加rule
2. 只想对单个input校验
3. 自定义校验（例如用正则校验手机号码、数字、url、中文等）
4. 添加动态校验（可以根据需要显示校验或者改变校验规则）
5. 遇到校验无效的问题

正常添加校验流程，在form表单加rule

1. 在el-form里面添加:rules=“rules”
2. 在el-form-item里面添加prop，prop对应:model="form"的form的属性
3. 然后在data里面添加属性rules
4. 在点击提交的按钮里面validate的校验

<el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="用户名称：" prop="username">
                <el-input v-model="form.username"  clearable :disabled="true"></el-input>
            </el-form-item>
            .....
</el-form>

data() {
    return {
      //在rules属性填写相关字段的校验规则
      rules: {
        username: [
            { required: true, message: "必填" },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],
  
      }
   }
}

methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            //调用接口保存
          } else {
              this.$message.error('请完善表单相关信息！');
            return false;
          }
        });

      },
      //或者
      onSubmit() {
         if(!this.checkForm()){
           this.$message.error('请完善表单相关信息！');
           return;
         }
         //调用接口保存

      },
      // 表单校验
     checkForm(){
       // 1.校验必填项
       let validForm = false;
       this.$refs.form.validate(valid => {validForm = valid})
       if(!validForm){
         return false;
       }
       //其他的校验
       /*if(){
          return false;
       }*/
       return true;
     }
      
}

对单个input校验

有时候并不想在form增加rules校验，只想对单个input增加校验,直接在el-form-item里面加rules

<el-form-item label="开始日期" :rules="{
      required: true, message: '开始日期不能为空', trigger: 'blur' }">
              <el-date-picker  v-model="form.startTime" type="date" placeholder="开始日期">
                <i slot="suffix" class="el-input__icon el-icon-date"></i>
              </el-date-picker>
</el-form-item>

自定义校验（正则校验手机号码、数字、url、中文）

提供几个用正则表达式做的自定义校验规则demo

data() {
    return {
      //在rules属性填写相关字段的校验规则
      rules: {
        username: [
            { required: true, message: "必填" },
            { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
        ],
        email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }],
        //自定义校验
        name:[
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { validator:function(rule,value,callback){
                          //校验中文的正则：/^[\u4e00-\u9fa5]{0,}$/
                          if(/^[\u4e00-\u9fa5]{0,}$/.test(value) == false){
                              callback(new Error("请输入中文"));
                          }else{
                              //校验通过
                              callback();
                          }
                        }, trigger: 'blur'
             },
        ],
        phone:[
               { required: true, message: '请输入手机号码', trigger: 'blur' },
               { validator:function(rule,value,callback){
                            if(/^1[34578]\d{9}$/.test(value) == false){
                                   callback(new Error("请输入正确的手机号"));
                            }else{
                                   callback();
                            }
                          }, trigger: 'blur'
                },
        ],
        age:[
              { validator:function(rule,value,callback){
                               if(/^[0-9]*$/.test(value) == false){
                                   callback(new Error("请输入正确的数字"));
                               }else{
                                   callback();
                               }
                           }, trigger: 'blur'
              },
        ],
        url:[
             { validator:function(rule,value,callback){
                               if(/^http:\/\/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) == false){
                                   callback(new Error("请输入正确的Url"));
                               }else{
                                   callback();
                               }
                           }, trigger: 'blur'
             },
        ],
      }
   }
}

添加动态校验（可以根据需要显示校验或者改变校验规则）

遇到过一种，根据form表单的一个下拉列表的选项来判断某些字段是否校验，选了A,要校验几个字段必填，选了B又要校验其他几个字段必填，这时候表单的校验需要动态添加，这时候我们需要动态改变rules属性相关的校验即可

例如刚刚这种根据下拉列表的选项来动态触发校验的，那么在el-select里面加@change事件，每次下拉列表改变就触发事件来改变form表单的校验规则

<el-select v-model="value" placeholder="请选择" @change="resetValidate">

data() {
    return {
      //在rules属性填写相关字段的校验规则
      rules: {
        phone: [{ required: true, message: "必填" }],
        email:[{ required: true, message: "必填" }],
  
      }
   }
},
methods: {
    //改变状态时动态重置校验规则
    resetValidate(){
      if(this.form.status== 1){
         //重置rules的phone、email的属性值，只校验手机，不校验邮箱
        this.rules.phone= [{ required: true, message: "必填" }];
        this.rules.email= [];
      }else{
        //只校验邮箱，不校验手机
        this.rules.phone= [];
        this.rules.email= [{ required: true, message: "必填" }];
      }
      this.$refs.form.clearValidate();
    },
}

遇到校验无效的问题

有一次遇到一个校验无效的问题，from表单其他字段校验都有效，就是有一个el-date-picker的校验一直没有效果，检查发现在el-form-item里面添加prop，prop对应:model="form"的form的属性并不是当前form里面的属性值.，所以这个el-date-picker没有触发校验

<el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="用户名称：" prop="username">
                <el-input v-model="form.username"  clearable :disabled="true"></el-input>
            </el-form-item>
            .....
</el-form>
// 1.里面的el-input绑定的username必须是:model="form"的form里面的属性
// 2.并且el-form-item的prop=username，才会校验生效，否则在element-ui会没有校验效果