JS代码
/**
*校验规则存放
*/
const telephoneValidate = (rule, phoneNo, callback) => {
const regPhoneNo = /^1[3|4|5|7|8][0-9]\d{8}$/
if(!phoneNo) {
callback(new Error('请输入电话号码'))
}else if(!regPhoneNo.test(phoneNo)) {
callback(new Error('请输入正确的11位手机号码'))
}else{
callback()
}
}
// 身份证号码校验
const IDCardValidate = (rule, IDCard, callback) => {
// 15位和18位身份证号码的正则表达式
const regIDCard = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/
// 如果通过该验证,说明身份证格式正确,但准确性还需计算
if (regIDCard.test(IDCard)) {
if (IDCard.length === 18) {
const IDCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]// 将前17位加权因子保存在数组里
const idCardY = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2] // 这是除以11后,可能产生的11位余数、验证码,也保存成数组
let idCardWiSum = 0 // 用来保存前17位各自乖以加权因子后的总和
for (let i = 0; i < 17; i++) {
idCardWiSum += IDCard.substring(i, i + 1) * IDCardWi[i]
}
const idCardMod = idCardWiSum % 11 // 计算出校验码所在数组的位置
const idCardLast = IDCard.substring(17) // 得到最后一位身份证号码
// 如果等于2,则说明校验码是10,身份证号码最后一位应该是X
if (idCardMod === 2) {
if (idCardLast === 'X' || idCardLast === 'x') {
callback()
} else {
console.log(Number(idCardLast), idCardY[idCardMod])
callback(new Error('身份证号码错误!'))
}
} else {
// 用计算出的验证码与最后一位身份证号码匹配,如果一致,说明通过,否则是无效的身份证号码
if (Number(idCardLast) === idCardY[idCardMod]) {
callback()
} else {
console.log(Number(idCardLast), idCardY[idCardMod])
callback(new Error('身份证号码错误!'))
}
}
}
} else {
callback(new Error('身份证格式不正确'))
}
}
export {
IDCardValidate,
telephoneValidate
}
引入JS文件
import { IDCardValidate } from "@/utils/validateRules";
语法
1.在data里声明效验规则
data (){
return {
addLq:{
idNo:""
}
receiveRules:{
idNo: [
{
required: true,
triger: "blur",
validator: IDCardValidate
}
],
}
}
}
2.在template里绑定
<el-form
//绑定ref为了做提交表单规则效验
ref="addLq"
//绑定data里的效验规则
:rules="receiveRules"
//绑定表单里的数组
:model="addLq"
//左边字段长度
label-width="100px"
>
//绑定prop才会生效
<el-form-item label="证件号码" prop="idNo" class="ibw40">
<el-input
class="ipt"
v-model="addLq.idNo"
placeholder="请输入证件号码"
></el-input>
</el-form-item>
<el-form>