一、需求：身份证号：根据身份证编码规则在表单输入框添加校验，手机号：验证基本格式。
1、验证form表单身份证合法性和手机号格式，页面效果如下
2、身份证编码规则
排列顺序从左至右依次为:六位数字地址码，八位数字出生日期码，三位数字顺序码和一位校验码。其含义如下:第1至6位为地址码，表示这个人常住户口所在的行政区划代码，顺序为省(直辖市，自治区，特别行政区)、地级市、县，分别2位数；第7至14位是出生日期码，表示出生的年、月、日，年、月、日分别用4位、2位(不足两位加0)、2(同上)位数字表示。第15至17位是顺序码:表示在同一地址码所表示的范围内，对同年、同月、同日出生的人编定的顺序号，顺序码的奇数分配给男性，偶数分配给女性。最后一位是校验码，通过前17位数字根据一定计算得出。
3、实现方法,具体注释在代码里
<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、后续有常用验证再补充，就这样，再见~