前言：在日常開發(fā)當(dāng)中經(jīng)常用到一些正則表達(dá)式， 比如 電話號碼洋幻、郵箱郁轻、IP和 數(shù)字等校驗，每次都要去查閱下才知道怎么書寫文留，特封裝一個好唯，方便后續(xù)查閱，本文會持續(xù)更新燥翅，也非常歡迎小伙伴們來評論區(qū)補(bǔ)充~
- 封裝一個公共 js文件骑篙，名命為
validate.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 || '正確格式: 區(qū)號-電話號碼 或 電話號碼'))
}
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()
},
money: (rule, value, callback) => {
if (value === '') {
callback()
return
}
const pass = /^\-?(?!0+)?:.0+)?$)(?:[1-9]\d*|0)(?:.\d{1,2})?$/.test(value))
if (isNaN(value)) {
return callback(new Error('必須為數(shù)字'));
}
if (String(value).split('.').length > 0) {
if (String(value).split('.')[0].length > 9) {
return callback(new Error('整數(shù)部分不能大于9位'));
}
if (value !== 0) {
if (!pass || !value) {
return callback(new Error('錢數(shù)精確兩位小數(shù)'));
}
}
}
callback();
},
postcode: (rule, value, callback) => {
if (value === '') {
callback()
return
}
const pass = /^\d{6}$/g.test(value)
if (!pass) {
callback(new Error(rule.message || '必須是6位數(shù)字'))
}
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 || '只能為數(shù)字'))
}
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 || '只能是數(shù)字和字母'))
}
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 || '必須是數(shù)字'))
}
callback()
},
positiveNumber: (rule, value, callback) => {
if (value === '') {
callback()
return
}
const pass = /^[0-9]\d*$/g.test(value)
if (!pass) {
callback(new Error(rule.message || '必須是正整數(shù)'))
}
callback()
},
posiNactiveNumber: (rule, value, callback) => {
if (value === '') {
callback()
return
}
const pass = /^[+-]?\d+(\.\d+)?$/g.test(value)
if (!pass) {
callback(new Error(rule.message || '可輸入正數(shù)負(fù)數(shù)和小數(shù)'))
}
callback()
}
}
- 在組件中引用該 js 文件即可
import validate from '@/util/validate.js'
- （以element-ui為例）在需要校驗的輸入框位置，直接調(diào)用
validate.***即可
rules: {
validtime: [
{
required: true,
message: '請輸入校驗信息',
trigger: ['change', 'blur']
},
{
validator: validate.notValidInputText,
message: '',
trigger: ['change', 'blur']
}
]
}
- demo示例
<template>
<div>
<el-form ref="searchform" :model="form" :rules="rules" label-width="150px">
<el-form-item label="正則表達(dá)式校驗" prop="validtime">
<el-input
type="text"
v-model="form.validtime"
placeholder="請輸入內(nèi)容"
></el-input>
</el-form-item>
</el-form>
</div>
</template>
<script>
import validate from '@/util/validate.js'
export default {
data() {
return {
form: {
validtime: ''
},
rules: {
validtime: [
{
required: true,
message: '請輸入校驗信息',
trigger: ['change', 'blur']
},
{
validator: validate.notValidInputText,
message: '',
trigger: ['change', 'blur']
}
]
}
}
}
}
</script>
感謝博客 https://blog.csdn.net/Yzt_199626/article/details/117295974
如果本文對你有所幫助森书，感謝點(diǎn)一顆小心心靶端，您的支持是我繼續(xù)創(chuàng)作的動力谎势！
