基于vue.js 和 element-ui   <el-form> 的 validate验证实现

html代码

 <el-form :model="baseInfo" ref="baseForm" :rules="baseFormRules" label-width="110px" class="departmentDetail-ruleForm">

   <el-form-item label="身份证号：" prop="idCardNo">    
     <el-input v-model="baseInfo.idCardNo" style="width:60%" />
   </el-form-item>

</el-form>

js代码

data(){
    return {
        baseFormRules: {  
           idCardNo: [
              { required: true, message: '身份证号不能为空', trigger: 'blur' },
               { validator: this.validID, trigger: 'blur' }
           ],
        },
        baseInfo: {},
        area: {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",
          31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",
          43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",
          61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"
        },
    }

}

方法一：（传统方法验证）

 methods: {

      // 检测身份证
      checkCard() {
        if(!this.baseInfo.idCardNo) return;
        let CardId = this.baseInfo.idCardNo;
        if(CardId.length == 15) {
          if(this.is15Card(CardId)) {
            this.go(CardId.length);
          }
          else {
            return this.$message({type: 'error', message: '您的身份证号有误！请输入你真实的身份证号，确保你的利益得到保障！'});
          }
        } else if (CardId.length == 18) {
          let a_iden = CardId.split("");
          if (this.is18Card(CardId) && this.is18CardEnd(a_iden)) {
            this.go(CardId.length);
            return this.is18Card(CardId);
          }
          else {
            return this.$message({type: 'error', message: '您的身份证号有误！请输入你真实的身份证号，确保你的利益得到保障！'});
          }
        } else {
          return this.$message({type: 'error', message: '您的身份证号有误！请输入你真实的身份证号，确保你的利益得到保障！'});
        }
      },

      // 检测18位身份证号最后一位是否符合要求
      is18CardEnd(a_idCard) {
        let sum = 0;
        if (a_idCard[17].toLowerCase() == 'x') {
          a_idCard[17] = 10;
        }
        for ( var i = 0; i < 17; i++) {
          sum += this.Wi[i] * a_idCard[i];
        }
        let valCodePosition = sum % 11;
        if (a_idCard[17] == this.ValideCode[valCodePosition]) {
          return true;
        } else {
          return false;
        }
      },

      // 验证最后一位校正码
      is18Card(idCard18){
        let year =  idCard18.substring(6,10);
        let month = idCard18.substring(10,12);
        let day = idCard18.substring(12,14);
        let temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
        if(temp_date.getFullYear()!=parseFloat(year)
          ||temp_date.getMonth()!=parseFloat(month)-1
          ||temp_date.getDate()!=parseFloat(day)){
          return false;
        }else{
          return true;
        }
      },

      is15Card(idCard15){
        let year =  idCard15.substring(6,8);
        let month = idCard15.substring(8,10);
        let day = idCard15.substring(10,12);
        let temp_date = new Date(year,parseFloat(month)-1,parseFloat(day));
        if(temp_date.getYear()!=parseFloat(year)||temp_date.getMonth()!=parseFloat(month)-1 ||temp_date.getDate()!=parseFloat(day)) {
          return false;
        }else{
          return true;
        }
      },

      // 实现自动生成生日，性别，年龄
      go(val) {
        let iden = this.baseInfo.idCardNo;
        let sex = null;
        let birth = null;
        let myDate = new Date();
        let month = myDate.getMonth() + 1;
        let day = myDate.getDate();
        let age = 0;

        if(val===18){
          age = myDate.getFullYear() - iden.substring(6, 10) - 1;
          sex = iden.substring(16,17);
          birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);
          if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;

        }
        if(val===15){
          age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
          sex = iden.substring(13,14);
          birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12);
          if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
        }

        if(sex%2 === 0)
          sex = '0';
        else
          sex = '1';
        this.baseInfo.sex = sex;
        this.baseInfo.age = age;
        this.baseInfo.birthday = birth;
        this.baseInfo.birthplace = this.area[iden.substring(0,2)];
      }
}

方法二：（正则表单验证）

  methods: {
      // 身份证验证
      async validID(rule,value,callback)
      {
        // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X 
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        if (reg.test(value)) {
          await this.go(value.length);
          callback()
        } else {
          callback(new Error('身份证号码不正确'))
        }
      },
      
      // 实现自动生成生日，性别，年龄
      go(val) {
        let iden = this.baseInfo.idCardNo;
        let sex = null;
        let birth = null;
        let myDate = new Date();
        let month = myDate.getMonth() + 1;
        let day = myDate.getDate();
        let age = 0;

        if(val===18){
          age = myDate.getFullYear() - iden.substring(6, 10) - 1;
          sex = iden.substring(16,17);
          birth = iden.substring(6,10)+"-"+iden.substring(10,12)+"-"+iden.substring(12,14);
          if (iden.substring(10, 12) < month || iden.substring(10, 12) == month && iden.substring(12, 14) <= day) age++;

        }
        if(val===15){
          age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
          sex = iden.substring(13,14);
          birth = "19"+iden.substring(6,8)+"-"+iden.substring(8,10)+"-"+iden.substring(10,12);
          if (iden.substring(8, 10) < month || iden.substring(8, 10) == month && iden.substring(10, 12) <= day) age++;
        }

        if(sex%2 === 0)
          sex = '0';
        else
          sex = '1';
        this.baseInfo.sex = sex;
        this.baseInfo.age = age;
        this.baseInfo.birthday = birth;
        this.baseInfo.birthplace = this.area[iden.substring(0,2)];
      },
}