vue 身份证校验

最近在做项目过程中，测试组人员对添加表单中的身份信息提出了需求，在填写身份证信息时，希望能对所填信息进行合法性校验。比如身份证的位数（目前二代身份证都是18位）、地区编号（所在省（市，旗，区）的行政区代码）、出生年月日（月份所对应的28天/29天/30天/31天）、顺序码（第十五到十七位，第十七位奇数是男性，偶数是女性），校验码（第十八位，如果尾号是10就用X代替了）。

html 代码

<el-form ref="xfrxxForm" :model="xfrxxForm" :rules="xfrxxRules" label-width="100px">
<el-form-item label="证件号码" prop="zjhm">
                  <el-input v-model="xfrxxForm.zjhm" maxlength="18" show-word-limit placeholder="请输入身份证号码"/>
                </el-form-item>
</el-form>

js 部分

data() {
    return {

        xfrxxRules：{
        zjhm: [
                  {required: true, message: '请输入身份证', trigger: 'blur'},
                  {
                    pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
                    message: '请输入正确的证件号', trigger: 'blur',
                    validator: this.validSjh
                  }
                ],
        }
    }
},
methods:{
    // 身份证验证
    async validSjh(rule, value, callback) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let reg = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      } else {
        //身份证城市
        var aCity = {
          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: "国外"
        };
        if (!aCity[parseInt(value.substr(0, 2))]) {
          callback(new Error("你的身份证地区非法"));
        }
        // 出生日期验证
        var sBirthday = (
            value.substr(6, 4) + "-" +
            Number(value.substr(10, 2)) + "-" +
            Number(value.substr(12, 2))
          ).replace(/-/g, "/"),
          d = new Date(sBirthday);
        if (sBirthday != d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()) {
          callback(new Error("身份证上的出生日期非法"));
        }

        // 身份证号码校验
        var sum = 0,
          weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
          codes = "10X98765432";
        for (var i = 0; i < value.length - 1; i++) {
          sum += value[i] * weights[i];
        }
        var last = codes[sum % 11]; //计算出来的最后一位身份证号码
        if (value[value.length - 1] != last) {
          callback(new Error("你输入的身份证号非法"));
        } else {
          await this.go(value, value.length);
        }
        callback();
      }
    },

}

封装使用 validate.js

export function isIdentityId(identityId) {
  var patrn = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;//长度或格式校验
  //地区校验
  var aCity = {
    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: "国外"
  };
  // 出生日期验证
  var sBirthday = (
    identityId.substr(6, 4) +
    "-" +
    Number(identityId.substr(10, 2)) +
    "-" +
    Number(identityId.substr(12, 2))
  ).replace(/-/g, "/"),
    d = new Date(sBirthday)
  // 身份证号码校验 最后4位  包括最后一位的数字/字母X
  var sum = 0,
    weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
    codes = "10X98765432";
  for (var i = 0; i < identityId.length - 1; i++) {
    sum += identityId[i] * weights[i];
  }
  var last = codes[sum % 11]; //计算出来的最后一位身份证号码

  var errorMsg = '';
  if (identityId === '') {
    errorMsg = "身份证号不能为空"
  } else if (!patrn.exec(identityId)) {
    errorMsg = "你输入的身份证长度或格式错误"
  } else if (!aCity[parseInt(identityId.substr(0, 2))]) {
    errorMsg = "你的身份证地区非法"
  } else if (sBirthday != d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate()) { errorMsg = "身份证上的出生日期非法" } else if (identityId[identityId.length - 1] != last) {
    errorMsg = "你输入的身份证号非法"
  }
  return errorMsg;
}

页面中使用

import { isIdentityId } from "../people-manage/validate";

data() {
    var checkIdentitytionId  = (rule, value, callback) => {
      var errorMsg = isIdentityId(value);
      if (errorMsg != "") {
        callback(new Error(errorMsg));
      }     
    };

 //校验规则
      rules: {
        identitytionId: [
          // { required: true, message: "请输入身份证号！", trigger: "blur" },
          { validator: checkIdentitytionId , trigger: "blur" }
        ]
      }