关于element表单校验(一)

一共是两种方法

 

第一种方法

html代码：

<el-col :span="10">
   <el-form-item label="荣誉级别" prop="honorLevel">
          <el-select v-model="editForm.honorLevel" placeholder="请选择">
              <el-option v-for="item in honorLevel" :key="item.dictValue" :value="item.dictValueCode" :label="item.dictValue"></el-option>
            </el-select>
     </el-form-item>
</el-col>

js代码：

honorLevel: [
   {
       required: true,
       message: "请选择荣誉级别",
       trigger: "blur"
     },
     {
        validator:function(rule,value,callback){
         console.log("输出value222",value)
          if(value == "ryjb_5"){
          callback(new Error("请选择荣誉级别"))
        }
         callback();  //必须要callback，要不校验过不去
        }
    }
],

第二种方法  第二种方法第一种差不多其实  只不过把方法放在data里面不是放在return里面了

　　html代码　

<el-form-item v-if="index==0" label="联系方式：" :prop="'information.' + index + '.phone'" :rules="selfSubmitDataRule.phone" class="phone-form">
     <el-input v-model="item.phone" placeholder="请输入联系方式" :disabled="ifCanEdit||overTimeLock"></el-input>
</el-form-item>

js代码

　　

data(){
    var telephoneNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("联系方式不能为空"));
      } else {
        const reg1 = /^1[3|4|5|7|8][0-9]\d{8}$/;
        // const reg2 = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
        if (reg1.test(value)) {
          callback();
        } else {
          return callback(new Error("请填写正确的手机号"));
        }
      }
    };
  return {
      selfSubmitDataRule: {
        phone: [
          {
            required: true,
            validator: telephoneNumber,
            trigger: "blur",
            max: 11
          }
        ],
      },     
    }  
}

第三种方法

　　第三种方法呢就是自定义一个方法

　　html代码：

<el-form-item label="换届年度" prop="theTermName" v-if="huanYear">
    <el-input v-model="addForm.theTermName" @blur="search"></el-input>
</el-form-item>

　　js代码：

search(){
   if(this.theTermNames > this.addForm.theTermName){
       this.$confirm("换届年度不能早于上一届的换届年度", "提示", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
           type: "warning"
       });
       this.addForm.theTermName = null;
     }
},