- 需求描述:
1.相对方联系方式需要支持手机号、座机号填入保存,可能会填写多个都需要校验是否能通过
2.相对方统一社会信用代码/身份证号码填入,可以是身份证号码也可以是社会统一信用代码,都得支持校验通过,并且容许填入多个以英文逗号分隔
1.首先定义一个js文件,用来编写上方对应代码(validateFromRules.js)
// 验证手机号/座机号
// isMultiple区分多个/一个 true为多个 false为一个
// isSingleType 是否只验证一种类型的证件号 默认为 false
// type 验证的证件号类型,可以是 'phone'(手机号码)、'landline'(座机号码)或 'both'(两者都验证),默认为 'both'
export function validatePhone(isMultiple = true, isSingleType = false, type = 'both') {
return function (rule, value, callback) {
if (!value) {
callback(new Error("相对方(经办人联系电话)不能为空"));
return;
}
const phonePattern = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
const landlinePattern = /^(\d{3,4}-)?\d{7,8}$/;
if (isMultiple) {
const phones = value.split(",").map((v) => v.trim());
const errors = [];
phones.forEach((phone) => {
if (type === 'phone' && !phonePattern.test(phone)) {
errors.push(`值 "${phone}" 无效: 请输入正确的手机号码`);
} else if (type === 'landline' && !landlinePattern.test(phone)) {
errors.push(`值 "${phone}" 无效: 请输入正确的座机号码`);
} else if (type === 'both') {
if (!phonePattern.test(phone) && !landlinePattern.test(phone)) {
errors.push(`值 "${phone}" 无效: 请输入正确的手机号码或座机号码`);
}
}
});
if (errors.length > 0) {
callback(new Error(errors.join("\n")));
} else {
callback();
}
} else {
if (type === 'phone' && !phonePattern.test(value)) {
callback(new Error("请输入正确的手机号码"));
} else if (type === 'landline' && !landlinePattern.test(value)) {
callback(new Error("请输入正确的座机号码"));
} else if (type === 'both') {
if (!phonePattern.test(value) && !landlinePattern.test(value)) {
callback(new Error("请输入正确的手机号码或座机号码"));
} else {
callback();
}
}
}
};
}
// 社会统一信代码/身份证号
// isMultiple区分多个/一个 true为多个 false为一个
// isSingleType 是否只验证一种类型的证件号 默认为 false
// type 验证的证件号类型,可以是 'idCard'(身份证号)、'socialCreditCode'(统一社会信用代码)或 'both'(两者都验证),默认为 'both'
export function validateSocialId(isMultiple = true, isSingleType = false, type = 'both') {
return function (rule, value, callback) {
if (!value) {
callback(new Error("统一社会信用代码/身份证号码不能为空!"));
return;
}
const values = isMultiple ? value.split(",").map((v) => v.trim()) : [value];
const errors = [];
values.forEach((val) => {
if (type === 'idCard' && !isIDCard(val)) {
errors.push(`值 "${val}" 无效: 不符合身份证号码的格式`);
} else if (type === 'socialCreditCode' && !isSocialCreditCode(val)) {
errors.push(`值 "${val}" 无效: 不符合统一社会信用代码的格式`);
} else if (type === 'both') {
if (isIDCard(val)) {
validateIDCard({}, val, (error) => {
if (error) {
errors.push(`值 "${val}" 无效: ${error.message}`);
}
});
} else if (isSocialCreditCode(val)) {
CheckSocialCreditCode({}, val, (error) => {
if (error) {
errors.push(`值 "${val}" 无效: ${error.message}`);
}
});
} else {
errors.push(
`值 "${val}" 无效: 不符合统一社会信用代码或身份证号码的格式`
);
}
}
});
if (errors.length > 0) {
callback(new Error(errors.join("\n")));
} else {
callback();
}
};
}
function isSocialCreditCode(code) {
return code.length === 18 && /^[0-9A-Z]+$/.test(code);
}
function isIDCard(idCard) {
return idCard.length === 18 && /^[0-9Xx]+$/.test(idCard);
}
function CheckSocialCreditCode(rule, Code, callback) {
if (Code.length !== 18) {
callback(new Error("不是有效的统一社会信用代码!"));
return;
}
const validChars = /^[0-9A-Z]+$/;
if (!validChars.test(Code)) {
callback(new Error("统一社会信用代码包含无效字符!"));
return;
}
let total = 0;
const weightedfactors = [
1, 3, 9, 27, 19, 26, 16, 17, 20, 29, 25, 13, 8, 24, 10, 30, 28,
];
const str = "0123456789ABCDEFGHJKLMNPQRTUWXY";
for (let i = 0; i < Code.length - 1; i++) {
const Ancodevalue = str.indexOf(Code.charAt(i));
total += Ancodevalue * weightedfactors[i];
}
let logiccheckcode = 31 - (total % 31);
if (logiccheckcode === 31) {
logiccheckcode = 0;
}
const checkCode = str.charAt(logiccheckcode);
const inputCheckCode = Code.charAt(17);
if (inputCheckCode !== checkCode) {
callback(new Error("不是有效的统一社会信用代码!"));
} else {
callback();
}
}
function validateIDCard(rule, idCard, callback) {
if (idCard.length !== 18) {
callback(new Error("不是有效的身份证号码!"));
return;
}
const validIdCardChars = /^[0-9Xx]+$/;
if (!validIdCardChars.test(idCard)) {
callback(new Error("身份证号码包含无效字符!"));
return;
}
const weightFactors = [
7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,
];
const verifyCodes = "10X98765432";
let sum = 0;
for (let i = 0; i < 17; i++) {
sum += parseInt(idCard.charAt(i), 10) * weightFactors[i];
}
const checkCode = verifyCodes[sum % 11];
if (idCard.charAt(17).toUpperCase() !== checkCode) {
callback(new Error("不是有效的身份证号码!"));
} else {
callback();
}
}
2.在main.js中引入并注册成全局方法
// 验证表单rules的js文件
import {
validatePhone,
validateSocialId
} from './utils/validateFromRules'; // 引入封装的验证方法
Vue.prototype.$validatePhone = validatePhone;
Vue.prototype.$validateSocialId = validateSocialId ;
3.在对应的vue界面中使用,方法支持传入三个参数
-
3.1第一个参数 isMultiple 是否容许传入多个参数,true:传入多个 false:只容许有一个
-
3.2第二个参数 isSingleType 是否只验证一种类型 默认为 false,可以选择两种都验证,比如同时填入手机号和座机号
-
3.3第三个参数 type 验证的证件号类型,可以是 ‘phone’(手机号码)、‘landline’(座机号码)或 ‘both’(两者都验证),默认为 ‘both’
rules: {
partyBPhone: [
{
required: true,
message: "相对方(经办人联系电话)不能为空",
trigger: "blur",
},
{
validator: this.$validatePhone(true, false, "both"),
trigger: "blur",
},
],
partyBSocialId: [
{
required: true,
message: "统一社会信用代码/身份证号码不能为空",
trigger: "blur",
},
{
validator: this.$validateSocialId(true, false, "both"),
trigger: "blur",
},
],
},