element-ui自定义表单验证及清除表单验证

element-ui提供了一套表单验证规则，非常方便，但是有时候我们需要添加一些正则或者是添加一些判断，这个时候官网上并没有这个例子，这里特地总结一下当时踩过的坑
html

<el-form ref="formtheadAllianceCharef" :rules="formtheadAllianceChaRules" :model="formtheadAllianceCha" label-width="120px">            
      <el-form-item label="姓名" prop="name">
          <el-input v-model="formtheadAllianceCha.name" size="medium" clearable></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="IDNumber">
          <el-input v-model="formtheadAllianceCha.IDNumber" size="medium" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender" >
           <el-radio-group v-model="formtheadAllianceCha.gender" class="elRadioBox">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
          </el-radio-group>                
      </el-form-item>
      <el-form-item label="电话" prop="tel">
          <el-input v-model="formtheadAllianceCha.tel" size="medium" clearable></el-input>                
      </el-form-item>
      <el-form-item label="电子邮箱" prop="emil">
          <el-input v-model="formtheadAllianceCha.emil" size="medium" clearable></el-input>
      </el-form-item>
      <el-form-item label="微信号" prop="WechatNumber">
          <el-input v-model="formtheadAllianceCha.WechatNumber" size="medium" clearable></el-input>
      </el-form-item>
       <el-form-item label="QQ号" >
          <el-input v-model="formtheadAllianceCha.emil" size="medium" clearable></el-input>
      </el-form-item>   
      <div class="footer_box">
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button  @click="RemoveCheck">取消</el-button>
      </div>
</el-form>

js

data() {
    let IDNumberRules = (rule, value, callback) => {
      let reg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      if (!reg.test(value)) {
        callback(new Error("身份证号输入有误，请重新输入"));
      } else {
        callback();
      }
    };
    let emilRules = (rule, value, callback) => {
      let reg = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
      if (!reg.test(value)) {
        callback(new Error("电子邮箱输入有误，请重新输入"));
      } else {
        callback();
      }
    };
    let telRules = (rule, value, callback) => {
      let reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (!reg.test(value)) {
        callback(new Error("手机号码输入有误，请重新输入"));
      } else {
        callback();
      }
    };
    return {
      formtheadAllianceCha: {
       name: "",
        IDNumber: "",
        gender: "男",
        tel: "",
        emile:"",
        WechatNumber:"",
        qqnumber:"",
      },
      //表单验证
      formtheadAllianceChaRules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        IDNumber: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: IDNumberRules, trigger: "blur" }
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "blur" }],
        tel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { validator: telRules, trigger: "blur" }
        ],
        emil: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: emilRules, trigger: "blur" }
        ],       
        WechatNumber: [
          { required: true, message: "请输入微信号", trigger: "blur" }
        ],
      },
    };
  },
  methods:{
  //提交时先校验表单
	 onSubmit() {    
		 //formtheadAllianceCharef为form表单的ref
	     this.$refs.formtheadAllianceCharef.validate(valid => {
	        if (valid) {
	         	//通过验证后执行的操作
	        }
	      });
    },
    //取消时清空表单校验
     RemoveCheck(){
      this.$refs.formtheadAllianceCharef.clearValidate(); //移除该表单项的校验结果
    },
}

需要特别注意的就是 formtheadAllianceChaRules（验证的规则） 中的 key 必须要与 formtheadAllianceCha（表单v-model绑定的值） 中的 key 相同，这样在验证的时候才能准备拿到输入框value的值，否则会一直是undefined