前言:在咱们做 vue 我的项目,日常开发的时候,必定会常常遇到正则表达式,例如手机号,邮箱,明码和数字,每次验证都须要去查问,浪费时间不说,也造成代码冗余,我也遇到过,那我就本人封装一个吧,不便大家应用查问。
上代码:
集体封装一个公共的 js 文件,名命为 rule.js, 如下:
// 手机号验证
telphone: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^(0[0-9]{2,3}-)?([2-9][0-9]{6,7})+(-[0-9]{1,4})?$/g.test(value)
if (!pass) {callback(new Error(rule.message || '正确格局: 区号 - 电话号码 或 电话号码'))
}
callback()},
phone: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^(\\+86)?0?[1][34578][0-9]{9}$/g.test(value)
if (!pass) {callback(new Error(rule.message || '请输出正确的电话号码'))
}
callback()},
email: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[a-zA-Z0-9_.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z0-9]{2,4}$/g.test(value)
if (!pass) {callback(new Error(rule.message || '请输出正确的邮箱'))
}
callback()},
postcode: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^\d{6}$/g.test(value)
if (!pass) {callback(new Error(rule.message || '必须是 6 位数字'))
}
callback()},
notValidInputText: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[^'/\\"()@$%^*<>&?]*$/g.test(value)
if (!pass) {callback(new Error(rule.message || '不能蕴含特殊字符 ^\'\\"()@$%^*<>&?*'))
}
callback()},
isNumber: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[0-9]*$/g.test(value)
if (!pass) {callback(new Error(rule.message || '只能为数字'))
}
callback()},
ip: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/g.test(value)
if (!pass) {callback(new Error(rule.message || '请输出正确的 ip 地址'))
}
callback()},
letterOrNumber: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[0-9a-zA-Z]+$/g.test(value)
if (!pass) {callback(new Error(rule.message || '只能是数字和字母'))
}
callback()},
letterOrNumberorUl: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^\w+$/.test(value)
if (!pass) {callback(new Error(rule.message || '只能是数字和字母和_'))
}
callback()},
id: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[a-zA-Z0-9-]{3,20}$/g.test(value)
if (!pass) {callback(new Error(rule.message || '只能为 3-20 位字符串'))
}
callback()},
number: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[0-9]{1,10}$/g.test(value)
if (!pass) {callback(new Error(rule.message || '必须是数字'))
}
callback()},
positiveNumber: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[0-9]\d*$/g.test(value)
if (!pass) {callback(new Error(rule.message || '必须是正整数'))
}
callback()},
posiNactiveNumber: (rule, value, callback) => {if (value === '') {callback()
return
}
const pass = /^[+-]?\d+(\.\d+)?$/g.test(value)
if (!pass) {callback(new Error(rule.message || '可输出负数正数和小数'))
}
callback()}
}
2. 在组件中援用:import rule from '@/util/rule.js'
在须要校验的输入框地位,间接调用 rule.rule 即可
rules: {
validate: [
{
required: true,
message: '请输出校验信息',
trigger: ['change', 'blur']
},
{
validator: rule.notValidInputText,
message: '',
trigger: ['change', 'blur']
}
]
}
感激反对!