1.定义一个input输入框
html
<input
type="text"
v-model="personnelInformationForm.idNo"
class="qrcode-main-form-li-input"
maxlength="18"
/>
<button class="qrcode-form-submit" @click="submitForm">提 交</button>
2.引入numberUtils 进行身份证号验证
javascript
<script>
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
import numberUtils from "../utils/idNoRules.js";
export default {
name: "informationEntry",
data() {
return {
personnelInformationForm: {
idNo: "",
}
};
},
methods: {
submitForm() {
//验证身份证号是否正确
if (this.personnelInformationForm.idNo) {
const result = numberUtils.checkIdCardNumber(
this.personnelInformationForm.idNo
);
if (result.status == 0) {
} else {
// 验证失败,根据错误码显示对应的错误信息
switch (result.status) {
case 1:
Toast("身份证号码位数不对!");
break;
case 2:
Toast("身份证号码出生日期超出范围或含有非法字符!");
break;
case 3:
Toast("身份证号码校验错误!");
break;
case 4:
Toast("身份证地区非法!");
break;
default:
Toast("未知错误!");
break;
}
return;
}
}
};
</script>
3.idNoRules.js中是验证的逻辑
javascript
// vue身份证检验方法
const numberUtils = {
checkIdCardNumber: (idcard) => {
var Errors = [
{
status: 0,
msg: '验证通过!'
},
{
status: 1,
msg: '身份证号码位数不对!'
},
{
status: 2,
msg: '身份证号码出生日期超出范围或含有非法字符!'
},
{
status: 3,
msg: '身份证号码校验错误!'
},
{
status: 4,
msg: '身份证地区非法!'
},
];
var area = {
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 ereg;
var idcard_array = idcard.split('');
// @ts-ignore
if (area[parseInt(idcard.substr(0, 2))] === null)
return Errors[4];
switch (idcard.length) {
case 18:
if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/;
//闰年出生日期的合法性正则表达式
} else {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/;
//平年出生日期的合法性正则表达式
}
if (ereg.test(idcard)) {
var S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 +
(parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 +
(parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 +
(parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 +
(parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 +
(parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 +
(parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 +
parseInt(idcard_array[7]) * 1 +
parseInt(idcard_array[8]) * 6 +
parseInt(idcard_array[9]) * 3;
var Y = S % 11;
var M = 'F';
var JYM = '10X98765432';
M = JYM.substr(Y, 1);
if (M == idcard_array[17])
return Errors[0];
else
return Errors[3];
} else
return Errors[2];
default:
return Errors[1];
}
}
}
export default numberUtils;