前言:在日常开发当中经常用到一些正则表达式, 比如 电话号码、邮箱、IP和 数字等校验,个人每次都要去查阅下才知道怎么书写,特自己封装一个,方便后续查阅,
同时后续还会新增一些校验。
先看下校验的效果:
话不多说,直接放代码:
1. 个人封装一个公共的 js文件,名命为 regulation.js, 如下:
export default {
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()
},
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. 在组件中引用该 js 文件即可
import valid from '@/util/regulation.js'
3. 在需要校验的输入框位置,直接调用 valid.******* 即可
如上述的例子,直接调用使用:
rules: {
validtime: [
{
required: true,
message: '请输入校验信息',
trigger: ['change', 'blur']
},
{
validator: valid.notValidInputText,
message: '',
trigger: ['change', 'blur']
}
]
}
4. 上述简单的 demo 如下:
<template>
<div>
<el-form ref="searchform" :model="form" :rules="rules" label-width="150px">
<el-row>
<el-col :span="8">
<el-form-item label="正则表达式校验" prop="validtime">
<el-input
type="text"
v-model="form.validtime"
placeholder="请输入内容"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>
<script>
import valid from '@/util/validator.js'
export default {
components: {},
data() {
return {
form: {
validtime: ''
},
rules: {
validtime: [
{
required: true,
message: '请输入校验信息',
trigger: ['change', 'blur']
},
{
validator: valid.notValidInputText,
message: '',
trigger: ['change', 'blur']
}
]
}
}
},
watch: {},
methods: {}
}
</script>
<style lang="scss" scoped></style>
5. 感谢支持,一起学习一起进步 🙏🙏