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

文章目录

前言
正文
- 1、首先，根据实际情况，目前我们使用的身份证由18位构成，包括数字和字母X。那么，在input输入框中就需要限制用户输入的数据类型。
- 2、其次，查看Element ui 组件库官网可知，我们可以自定义表单的校验规则。官网中给出的实例为：
- 3、根据官网中的使用方式，在自己的项目中实现为：
- 4、优化：

前言

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

正文

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

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

        <el-inputv-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-inputv-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位  包括最后一位的数字/字母Xvar 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行。优化过后的代码，要比最初实现方式简洁了许多。

实现效果【动图】：

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

java 代码实现身份证合法性校验(全国所有地方)
很多地方可能都会用到对身份证要进行判断校验的功能,这个是之前在网上看到的,具体的网址都忘了,现在项目完成了,有时间把其整理下,方便自己和大家日后使用!(直接复制粘贴即可) package org.as ...
身份证合法性校验规则
身份证构成说明: 身份证号构成(从左到右): 第1-6位数是行政区域编码第7到第14位是出生日期第15-17位是同一天出生的顺序号(男的用奇数数,女的用偶数) 第18位是校验码,根据ISO7064 ...
java身份证工具类，身份证合法性校验，根据身份证获取生日、年龄、性别
import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.*; /** * 身份证号码校验工具 ...
Hive进行身份证合法性校验
身份证号码格式校验是很多系统在数据集成时的一个常见需求,我们以18位身份证为例,使用一个Hive查询实现身份证号码的合法性验证.该查询结果是所有不合规的身份证号码.按以下身份证号码的定义规则建立查询. ...
JS身份证合法性校验完全版
<script>//身份证号合法性验证//支持18位身份证号//支持地址编码.出生日期.校验位验证function IdentityCodeValid(code) {var city = ...
js简单判断身份证合法性以及身份证生日合法性
该函数可以判断身份证生意是否合法,简单判断是否符合身份证规则,没有验证区县等等,借鉴了网络上的一些写法.. function idCard(UUserCard, num) { // 身份证号码为15位 ...
在vue中使用高德地图获取坐标与地址信息(包含点击+搜索)
首先注册登陆高德地图 https://lbs.amap.com/ 划过头像里面有个应用管理点开进入到应用管理打开我的应用选择创建应用然后按照要求填写内容,切记一定要选择web端(JS API) ...
java校验身份证的合法性
一.判断身份证合法性的规则 1.首先先科普一下身份证号码的数字代表什么? 根据[中华人民共和国国家标准GB11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和 ...
在java中如何做身份证号码校验
https://blog.csdn.net/persistencegoing/article/details/84376427 直接上代码,里面有测试类 /*** 身份证前6位[ABCDEF]为行政区 ...

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

文章目录

前言

正文

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

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

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

4、优化：

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

最新文章

热门文章

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

文章目录

前言

正文

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

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

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

4、优化：

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

最新文章

热门文章

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