开发基于Vue.js使用Element UI、iView UI的项目时,写验证和常用自定义验证可以封装成独立函数,轻松调用,
包含常用手机、邮箱、身份证、QQ号码、微博账号、最小、最大等验证。
vue文件中调用(非常方便)

扩展验证调用

扩展验证方法编写 (validateRules.js底部 2023-04-12新增)

validateRules.js
/**
* @description 表单验证封装
*/
export const regExp = {
validateRequired(rule, value, callback, source, options, name, type){
if (!value) {
let action = '输入'
if(['radio', 'select', 'cascader'].some(d=>d===type)){
action = '选择'
}
callback(new Error('请'+action+name))
} else {
callback()
}
},
// 10字符必填(同理20字符必填,50字符必填,1500字符必填)
validateLen(rule, value, callback) {
let stringLen1 = /^[\s\S]{1,10}$/
if (!value) {
callback(new Error('请填写XXXX'))
} else if (!stringLen1.test(value)) {
callback(new Error('超过10字符限制'))
} else {
callback()
}
},
validateIP(rule, value, callback, source, options, isRequired = false) {
// 支持通配符的ipv4正则
const ipv4Regex = /^(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))(?!.*?\.\*\.[*\d])(?:\.(?:(?:[1-9]?[0-9]|1[0-9]{2}|2(?:[0-4][0-9]|5[0-5]))|\*)){1,3}$/
// Ipv4: /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
// Ipv6:
const ipv6Regex = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
// Ipv4或者Ipv6:
// let regex = /^(?:(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*)$/
if (!value && !isRequired) {
callback()
} if (!value) {
callback(new Error('请输入IP'))
} else if (!ipv4Regex.test(value)&&!ipv6Regex.test(value)) {
callback(new Error('请输入正确的IP'))
} else {
callback()
}
},
//0-100百分比验证
validatepercentage(rule, value, callback) {
let reg = /^([1-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/
if (!value) {
callback(new Error('请输入比例'))
} else if (!reg.test(value)) {
callback(new Error('请输入0-100的数字'))
} else {
callback()
}
},
// 手机号 (eg:138********,159********)
validatePhone(rule, value, callback, source, options, isRequired = false) {
let regPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入手机号码'))
} else if (!regPhone.test(value)) {
callback(new Error('手机号格式错误'))
} else {
callback()
}
},
validatevoidname(rule, value, callback) {
if (!value) {
callback(new Error("请输入用户名"));
} else {
callback();
}
},
// 用户名 (eg:a123456)
validateUserName(rule, value, callback) {
let regUserName = /^[0-9a-zA-Z]{6,16}$/
if (!value) {
callback(new Error('请输入登录账号'))
} else if (!regUserName.test(value)) {
callback(new Error('请输入6-16位由字母和数字组成的登录账号'))
} else {
callback()
}
},
// 账号
validateAccount(rule, value, callback, source, options, isRequired = false) {
let regex = /^[\w_\d]{6,16}$/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入账号'))
} else if (!regex.test(value)) {
callback(new Error('请输入6-16位由字母、数字或下划线组成的账号'))
} else {
callback()
}
},
// 密码
validatePassword(rule, value, callback) {
let regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,18}$/
if (!value) {
callback(new Error('请输入密码'))
} else if (!regPassword.test(value)) {
callback(new Error('密码格式错误!必须包含6-18为字母和数字'))
} else {
callback()
}
},
// 密码
validateConfirmPassword(rule, value, callback, source, options, originPwd) {
originPwd = originPwd()
if (!value) {
callback(new Error('请再次输入密码'));
} else if (value !== originPwd) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
},
// 邮箱
validateEmails(rule, value, callback, source, options, isRequired = false) {
let regEmails = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
// console.log('isRequired is: ', JSON.stringify(isRequired))
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入邮箱'))
} else if (!regEmails.test(value)) {
callback(new Error('邮箱格式错误'))
} else {
callback()
}
},
// 金额验证
validateAmount(rule, value, callback, source, options, isRequired = false) {
let regAmount = /(^[0-9]{1,10}$)|(^[0-9]{1,10}[\.]{1}[0-9]{1,2}$)/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入金额'))
} else if (!regAmount.test(value)) {
callback(new Error('金额格式错误,最多允许输入10位整数及2位小数'))
} else {
callback()
}
},
// 身份证验证
validateIdCard(rule, value, callback, source, options, isRequired = false, isEnabled = true) {
let 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{3}([0-9]|X|x)$/
if(!isEnabled){
callback()
}else if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入身份证号'))
} else if (!regIdCard.test(value)) {
callback(new Error('身份证号码格式错误'))
} else {
callback()
}
},
// 银行卡验证
validateBank(rule, value, callback, source, options, isRequired = false) {
let regBank = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback()
} else if (!regBank.test(value)) {
callback(new Error('银行卡号码格式错误'))
} else {
callback()
}
},
// 非零正整数验证
validateNum(rule, value, callback) {
let reg = /^\+?[1-9][0-9]*$/
if (!value) {
callback(new Error('请填写非零正整数'))
} else {
if (reg.test(value) == false) {
callback(new Error('请输入非零的正整数'))
} else {
callback()
}
}
},
// 银行卡
validateBankCard(rule, value, callback) {
let regBankCard = /^(\d{16}|\d{19})$/
if (value == '') {
callback(new Error('请输入银行卡号'))
} else {
if (regBankCard.test(value) == false) {
callback(new Error('银行卡号格式错误'))
} else {
callback()
}
}
},
// 固话格式
validateTel(rule, value, callback) {
let regTel = /^(0\d{2,3}-?)?\d{7,8}$/
if (value == '') {
callback(new Error('请输入座机号码'))
} else {
if (regTel.test(value) == false) {
callback(new Error('座机号码格式错误'))
} else {
callback()
}
}
},
// QQ号码
validateQQ(rule, value, callback, source, options, isRequired = false) {
let regex = /^[1-9][0-9]{4,}$/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入QQ号码'))
} else {
if (!regex.test(value)) {
callback(new Error('QQ号码格式错误'))
} else {
callback()
}
}
},
// weibo号
validateWeibo(rule, value, callback, source, options, isRequired = false) {
let regex = /^[0-9a-zA-Z\u4e00-\u9fa5_-]*$/
if (!value && !isRequired) {
callback()
} else if (!value) {
callback(new Error('请输入微博账号'))
} else {
if (!regex.test(value)) {
callback(new Error('微博号码格式错误'))
} else {
callback()
}
}
},
}
const triggerType = (trigger, type)=> {
if(trigger) return trigger
let triggerType = 'blur'
if(['radio', 'select', 'number'].some(d=>d===type)){
triggerType = 'change'
}
return triggerType
}
export const validateRules = {
required: (name, type, trigger) => ({required: true, validator: (...rest)=>regExp.validateRequired.apply(regExp, rest.concat(name, type)), trigger: triggerType(trigger, type)}),
range: (min, max, trigger) => [validateRules.min(min, trigger), validateRules.max(max, trigger)],
password: (trigger) => ({validator: regExp.validatePassword, trigger: triggerType(trigger)}),
account: (isRequired, trigger) => ({validator: (...rest) => regExp.validateAccount.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
email: (isRequired, trigger) => ({validator: (...rest)=>regExp.validateEmails.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
confirmPassword: (originPwd, trigger) => ({validator: (...rest) => regExp.validateConfirmPassword.apply(regExp, rest.concat(originPwd)), trigger: triggerType(trigger)}),
phone: (isRequired, trigger) => ({validator: (...rest) => regExp.validatePhone.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
ip: (isRequired, trigger) => ({validator: (...rest) => regExp.validateIP.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
idCard: (isRequired, isEnabled, trigger) => ({validator: (...rest) => regExp.validateIdCard.apply(regExp, rest.concat(isRequired, isEnabled)), trigger: triggerType(trigger)}),
qq: (isRequired, trigger) => ({validator: (...rest) => regExp.validateQQ.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
weibo: (isRequired, trigger) => ({validator: (...rest) => regExp.validateWeibo.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
amount: (isRequired, trigger) => ({validator: (...rest) => regExp.validateAmount.apply(regExp, rest.concat(isRequired)), trigger: triggerType(trigger)}),
min: (minLength, trigger) => ({min: parseInt(minLength), message: `最少输入${minLength}个字符`, trigger: triggerType(trigger)}),
max: (maxLength, trigger) => ({max: parseInt(maxLength), message: `最多输入${maxLength}个字符`, trigger: triggerType(trigger)}),
}
/**
* 扩展验证工厂函数
* @param regexObj
* @param isRequired
* @param trigger
* @returns {{validator: validator, trigger: (*|string), required: boolean}}
*/
const extRegExp = (regexObj, isRequired = false, trigger) => {
return ({
required: isRequired,
validator: (rule, value, callback) => {
const regex = regexObj.regex
if (!value && !isRequired) {
callback()
}
else if (!value) {
callback(new Error(`请输入${regexObj.name}`))
}
else if (!regex.test(value)) {
callback(new Error(`请输入${regexObj.errorTips}`))
}
else {
callback()
}
},
trigger: triggerType(trigger),
})
// return ({ validator: (...rest) => regExp.validateName(...rest.concat(isRequired)), trigger: triggerType(trigger) })
}
/**
* 扩展正则验证器
* @type {{lettersAndNumbers: {regex: RegExp, name: string}}}
*/
export const extValidateRules = {
captcha: (isRequired, trigger) => extRegExp({
name: '验证码', // 字母加数字,最大20位
errorTips: '请输入正确的验证码',
regex: /^[\d]{6}$/,
}, isRequired, trigger),
brandName: (isRequired, trigger) => extRegExp({
name: '品牌名称', // 字母加数字,最大20位
errorTips: '字母和数字的字符,最多20位',
regex: /^[\w\d]{0,20}$/,
}, isRequired, trigger),
onlyNumber: (name, isRequired, trigger) => extRegExp({
name: name || '数字', // 数字
errorTips: `最多10位的${name}`,
regex: /^[\d]{0,10}$/,
}, isRequired, trigger),
}


被折叠的 条评论
为什么被折叠?



