element-ui实例
身份证验证
身份证验证规则：
- 前6位是地址码，表示登记户口时所在地的行政区划代码，依照《中华人民共和国行政区划代码》国家标准（GB/T2260）的规定执行；
- 7到14位是出生年月日，采用YYYYMMDD格式；
- 15到17位是顺序码，表示在同一地址码所标识的区域范围内，对同年、同月、同日出生的人编订的顺序号，顺序码的奇数分配给男性，偶数分配给女性，即第17位奇数表示男性，偶数表示女性；
- 第18位是校验码，采用ISO 7064:1983, MOD 11-2校验字符系统
element-form表单添加身份证输入框
<el-input
v-model=”RegisterForm.idCard”
placeholder=”身份证号”>
在RegisterForm注册组件中添加idCard属性
在data中定义isCardId ，用来判断身份证号是否符合规范
var isCardId = (rule, value, callback) => {
if (!value) {
return new Error(“请输入身份证号)”);
} else {
const reg =
/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
const card = reg.test(value);
if (!card) {
callback(new Error(“身份证号格式有误！”));
} else {
callback();
}
}
}
在renturn返回值中定义规则rule,在rule中添加身份证规则，并引用isCardId
idCard: [
{ required: true, message: “请输入证件号”, trigger: “blur” },
{ validator: isCardId, trigger: “blur” }
]
到这里还没结束，身份证号码最后一位是校验码，是根据前面17位以及对应的校验规则生成在isCardId 中将最后一个else条件替换成：
let c = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2); //系数
let b = new Array(‘1’,’0’,’X’,’9’,’8’,’7’,’6’,’5’,’4’,’3’,’2’); //校验码对照表
let id_array = value.split(“”);
let sum = 0;
for(let k=0;k<17;k++){
sum+=parseInt(id_array[k])*parseInt(c[k]);
}
if(id_array[17].toUpperCase() != b[sum%11].toUpperCase()){
callback(new Error(‘身份证号输入有误！’));
}else{
callback();
}
}
手机号格式验证
element-form表单添加手机号输入框
在RegisterForm注册组件中添加phone属性
在rule中添加手机号规则
phone: [
{ required: true, message: ‘请输入手机号码’, trigger: ‘blur’ },
{ min: 11, max: 11, message: ‘请输入11位手机号码’, trigger: ‘blur’ },
{
pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
message: ‘请输入正确的手机号码’
}
],