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

一. 需求

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

二. 代码验证

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位的中文字符；无法确认姓名与身份证号码是否为同一个人，要确认是否为本人的话需要调国

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