前端对用户身份证号码进行验证以及模糊显示

一. 需求

后台管理系统项目，展示用户传入身份证号码。现需要验证用户输入的身份证号码的真实性，以及对身份证号码进行模糊显示。

二. 代码验证

2.1 验证身份证号码的真实性

参考的这篇文章：https://www.cnblogs.com/zpblogs/p/11239597.html#/cnblog/works/article/11239597

//身份证真实性验证
function testIdCard(value) {
  var vcity = {
    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: "国外"
  };

  // 判断是否为空
  isEmpty = function (card) {
    if (/^\s*$/.test(card) === true) {
      return true;
    }
  }

  //检查号码是否符合规范，包括长度，类型  
  isCardNo = function (card) {
    if (isEmpty(card)) {
      return true;
    }
    //这个代码表示身份证可以为空
    //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X  
    var reg = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
    if (reg.test(card) === false) {
      return false;
    }
    return true;
  };

  //取身份证前两位,校验省份  
  checkProvince = function (card) {
    if (isEmpty(card)) {
      return true;
    }
    var province = card.substr(0, 2);
    if (vcity[province] == undefined) {
      return false;
    }
    return true;
  };

  //检查生日是否正确  
  checkBirthday = function (card) {
    if (isEmpty(card)) {
      return true;
    }
    var len = card.length;
    //身份证15位时，次序为省（3位）市（3位）年（2位）月（2位）日（2位）校验位（3位），皆为数字  
    if (len == '15') {
      var re_fifteen = /^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/;
      var arr_data = card.match(re_fifteen);
      var year = arr_data[2];
      var month = arr_data[3];
      var day = arr_data[4];
      var birthday = new Date('19' + year + '/' + month + '/' + day);
      return verifyBirthday('19' + year, month, day, birthday);
    }
    //身份证18位时，次序为省（3位）市（3位）年（4位）月（2位）日（2位）校验位（4位），校验位末尾可能为X  
    if (len == '18') {
      var re_eighteen = /^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/;
      var arr_data = card.match(re_eighteen);
      var year = arr_data[2];
      var month = arr_data[3];
      var day = arr_data[4];
      var birthday = new Date(year + '/' + month + '/' + day);
      return verifyBirthday(year, month, day, birthday);
    }
    return false;
  };

  //校验日期  
  verifyBirthday = function (year, month, day, birthday) {
    var now = new Date();
    var now_year = now.getFullYear();
    //年月日是否合理  
    if (birthday.getFullYear() == year && (birthday.getMonth() + 1) == month && birthday.getDate() == day) {
      //判断年份的范围（3岁到100岁之间)  
      var time = now_year - year;
      if (time >= 3 && time <= 100) {
        return true;
      }
      return false;
    }
    return false;
  };

  //校验位的检测  
  checkParity = function (card) {
    if (isEmpty(card)) {
      return true;
    }
    //15位转18位  
    card = changeFivteenToEighteen(card);
    var len = card.length;
    if (len == '18') {
      var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
      var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
      var cardTemp = 0, i, valnum;
      for (i = 0; i < 17; i++) {
        cardTemp += card.substr(i, 1) * arrInt[i];
      }
      valnum = arrCh[cardTemp % 11];
      if (valnum == card.substr(17, 1)) {
        return true;
      }
      return false;
    }
    return false;
  };

  //15位转18位身份证号  
  changeFivteenToEighteen = function (card) {
    if (isEmpty(card)) {
      return true;
    }
    if (card.length == '15') {
      var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
      var arrCh = new Array('1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2');
      var cardTemp = 0, i;
      card = card.substr(0, 6) + '19' + card.substr(6, card.length - 6);
      for (i = 0; i < 17; i++) {
        cardTemp += card.substr(i, 1) * arrInt[i];
      }
      card += arrCh[cardTemp % 11];
      return card;
    }
    return card;
  };

  var card = value;
  //校验长度，类型  
  if (isCardNo(card) === false) {
    //alert('您输入的身份证号码不正确，请重新输入');
    //document.getElementById('card_no').focus;
    return false;
  }

  //检查省份  
  if (checkProvince(card) === false) {
    return false;
  }

  //校验生日  
  if (checkBirthday(card) === false) {
    return false;
  }

  //检验位的检测  
  if (checkParity(card) === false) {
    return false;
  }

  return true;
}

该方法可以通过传入的身份证号码，校验其长度、省份、出生日期以及最后一位校验码的真实性。

例：通过身份证号码的前17位，就可以算出最后一位校验码的值，来比对和传入的是否相等。

我输入的身份证号码为510125********253X（真实的），通过打断点，上面链接里面的方法计算出来的最后一位验证码就是X

✲ 该方法有个漏洞，当传入的值为空时，依然会被审核通过，所以需要在进入函数时加个限制条件，如下：

function testIdCard(value) {
  if (!value) return false
  ...
  ...
  ...
}

也建议在进入该函数前就进行判断，当身份证号的值为空时，弹框提醒填身份证。

2.2 对身份证号码进行模糊显示

1.刚开始，我拿到的身份证号码校验位不是X

userIdCard = '510129198507152316'

处理如下：

userIdCard.replace(/^(\d{6})\d+(\d{4})$/, "\$1********\$2")

效果如下：

2.后面一个新的测试数据，校验位是X，上面的正则就不行了，需要换个通用的

userIdCard = '51072119730605754X'

处理如下：

 userIdCard.replace(/^(.{6})\d+(.{4})$/, "\$1********\$2")
 
 userIdCard.replace(/^(.{6}).+(.{4})$/, "\$1********\$2")
 
 userIdCard.replace(/^(\d{6})\w+(.{4})$/, "\$1********\$2")
 
 userIdCard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2")
 
 userIdCard.replace(/^(.{6})(?:\d+)(.{4})$/, "\$1********\$2")
 
 userIdCard.replace(/^(.{6})(?:.+)(.{4})$/, "\$1********\$2")

效果如下：

3.由于知晓身份证前17位只能数字，最后一位校验码可能是数字或者X，所以最好的写法为：

userIdCard.replace(/^(\d{6})\d+(\w{4})$/, "\$1********\$2")

^(\d{6})  表示从首位开始匹配，匹配6位数字

\d+       表示从当前位置开始，至少匹配一个数字

(\w{4})$  表示从末位开始匹配，匹配4位单字字符（字母、数字或者下划线）

\$1       表示第一个小括号里面匹配的内容，指^(\d{6})这部分

********  表示中间的内容部分，指\d+

\$2       表示第二个小括号里面匹配的内容，指(\w{4})$这部分

4.对于电话号码的替换，改变匹配位数就行了

tel = '18145556555'

tel.replace(/^(\d{3})\d+(\d{4})$/, '\$1****\$2')

效果如下：

三. 结尾

以上对身份证号码真实性的验证，也只是验证号码是否符合国家标准，无法确认是否为本人。对于用户传入的姓名，前端也可

以验证，不过也只是验证是否为2-4位的中文字符；无法确认姓名与身份证号码是否为同一个人，要确认是否为本人的话需要调国

家实名认证的接口，但这个也就不需要前端来做了。