1. Requirements: ID number: add verification in the input box of the form according to ID card coding rules, mobile phone number: verify the basic format.
1. Verify the legitimacy of the form ID card and the format of the mobile phone number. The page effect is as follows
2. ID card coding rules
The order of arrangement from left to right is: six-digit address code, eight-digit date of birth code, three-digit sequential code and one check code. Its meaning is as follows: the 1st to 6th digits are address codes, indicating the administrative division code where the person’s permanent residence is located, in the order of provinces (municipalities, autonomous regions, special administrative regions), prefecture-level cities, and counties, with 2 digits respectively; 14 bits are the date of birth code, which represents the year, month, and day of birth, and the year, month, and day are represented by 4, 2 (less than two plus 0), and 2 (same as above) digits respectively. The 15th to 17th are sequence codes: represent within the scope that same address code represents, to the same year, same month, the sequence number that the people who were born on the same day make, the odd number of sequence code is assigned to the male, and the even number is assigned to the female. The last digit is the check code, which is calculated according to certain conditions through the first 17 digits.
3. The implementation method, the specific comments are in the code
<template>
<div>
<!-- 表单-->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="ruleForm.idCard" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input v-model="ruleForm.phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitBtn" round class="currency-btn">验证</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "demo",
data() {
// 身份证验证
var validatorIdCard = (rule, value, callback) => {
// 地区
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(!/^\d{
17}(\d|x)$/i.test(value)){
callback(new Error('您输入的身份证号长度或格式错误，请输入正确的身份证号'));
return;
}
// 验证前两位是否为省份代码
value=value.replace(/x$/i,"a");
if(aCity[parseInt(value.substr(0,2))]==null){
callback(new Error('您输入的身份证号长度或格式错误，请输入正确的身份证号'));
return;
}
// 身份证上的出生年月校验
var sBirthday=value.substr(6,4)+"-"+Number(value.substr(10,2))+"-"+Number(value.substr(12,2));
var d=new Date(sBirthday.replace(/-/g,"/")) ;
if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate())){
callback(new Error('您输入的身份证号不合法，请输入正确的身份证号'));
return;
}
// 身份证校验位判断
var iSum=0 ;
for(var i=17;i>=0;i--) {
iSum += (Math.pow(2,i) % 11) * parseInt(value.charAt(17 - i),11) ;
}
if(iSum%11!=1){
callback(new Error('您输入的身份证号不合法，请输入正确的身份证号'));
return;
}
callback()
};
return {
ruleForm:{
},
rules:{
idCard: [
{
required: true, validator: validatorIdCard, trigger: 'blur' },
],
phone: [
//非空验证
{
required: true, message: '请输入手机号', trigger: 'blur' },
// 手机号格式
{
required: true,
pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{
8}$/,
message: '请输入正确的手机号码',
trigger: 'blur',
},
],
}
};
},
methods: {
//表单提交方法
submitBtn() {
this.$refs.ruleForm.validate((valid) =>{
if(valid) {
console.log('验证通过')
}
})
},
},
}
</script>
<style scoped>
.demo-ruleForm {
margin: 50px auto;
width: 50%;
}
.currency-btn{
padding: 10px 60px !important;
box-shadow: 0 5px 9px 0 rgba(245,67,118,0.3) !important;
}
</style>
4. Follow-up common verification will be supplemented, that’s it, goodbye~