vue中如何自定义Form表单rules校验方法（手机号/座机号、身份证号/社会统一信代码校验，支持多个，以英文逗号分隔）

• 需求描述：
  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",},],},