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

一. 需求

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

二. 代码验证

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

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

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

例:通过身份证号码的前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位的中文字符;无法确认姓名与身份证号码是否为同一个人,要确认是否为本人的话需要调国家实名认证的接口,但这个也就不需要前端来做了。

讨论数量: 1

慎思笃行

4个月前

慎思笃行