vue中如何进行身份证合法性校验（身份证18位，包含最后一位数字/字母）

前言

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

正文

有了新需求，就要满足用户的要求。接下来将介绍我是如何实现身份校验的。项目中使用的前端框架位vue，组件库为Element ui。

1、 首先，根据实际情况，目前我们使用的身份证由18位构成，包括数字和字母X。那么，在input输入框中就需要限制用户输入的数据类型。

        <el-input
              v-model="addStudentList.identitytionId"
              // 使用正则表达式，只能输入阿拉伯数字0-9，和字母X（大写）
             onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')">
            
         </el-input>
            

2、其次，查看Element ui 组件库官网可知，我们可以自定义表单的校验规则。官网中给出的实例为：

  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },

3、根据官网中的使用方式，在自己的项目中实现为：

HTML部分：
<el-form :model="addStudentList" :rules="rules" ref="addStudentRef">
     <el-form-item label="身份证号:" prop="identitytionId" :label-width="formLabelWidth">
         <el-input
            v-model="addStudentList.identitytionId"
            onkeyup="this.value=this.value.replace(/[^\X0-9]/g, '')">
         </el-input>
     </el-form-item>
 </el-form>

JS部分：
export default {
  data() {
    var checkIdentitytionId = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("身份证号不能为空"));
      }
      if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback(new Error("你输入的身份证长度或格式错误"));
      }
      //身份证城市
      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("你输入的身份证号非法"));
      }
      callback();
    };

    return {
      //校验规则
      rules: {
        identitytionId: [
        { validator: checkIdentitytionId , trigger: "blur" }
        ]
      }
    };

上面的实现方式就是参考官网中的实例进行的。
当这样写代码实现了需求时，那么问题又来了。按照项目组开发要求，每一vue组件中代码行数控制在100行左右，光实现身份校验这一需求就差不多占用了五分之四，还要有其他的业务需求，显然把上面这一大段代码放在这个vue组件中是不太合理的。最好是把它封装起来，然后直接调用。

4、优化：

既然上面这一校验规则是在JS部分实现的，那我是不是可以把它单独写在js文件中，然后在这个vue组件中引入写好校验规则的js文件呢。按照这个思路的实现方式如下：
A、新建校验规则的js文件：

/*
 * @Description:身份证校验规则.
 * @Version: 1.0
 * @Author: Nydia
 * @Date: 2020-06-28 19:02:19
 * @LastEditors: Nydia
 * @LastEditTime: 2020-06-29 08:36:09
 */
 //在js文件中写一个身份校验的方法，在需要身份校验的vue组件中导入这个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;
}

B、在需要身份校验的vue组件中导入js文件：

//项目目录结构如上图
import { isIdentityId } from "../people-manage/validate";

C、在该vue组件中的JS部分data属性中调用js文件中的方法，传入参数value（input输入框value值），定义变量接收校验结果。

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

D、rules中的校验规则调用方式同上：

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

将校验规则封装后，再调用方法进行校验，data属性中的校验规则回调函数中的代码由80多行缩减到了3行。优化过后的代码，要比最初实现方式简洁了许多。

实现效果【动图】：