element form 中的常用验证

在el-form里面添加:rules=“rules”
在el-form-item里面添加prop，prop对应:model="form"的form的属性
然后在data里面添加属性rules
在点击提交的按钮里面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' }],
  
      }
   }
}

只对单个input校验

<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、中文）

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

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

<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会没有校验效果

转载：https://blog.csdn.net/qq_21187515/article/details/103543721