开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第8天,查看详情
开发背景: 1. 由于很多的页面都需要用到正则表达式,所以把常用的正则封装成js,页面上引用即可
1. 不可输入特殊字符
export function checkInput(val) {
var reg =
/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
var pattern = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~!@#¥%&*()\-+={}|《》?:“”【】、;‘’,。、]/im;
if (val == '') {
uni.showToast({
title: '请填写完整',
icon: 'none'
})
return false
}
if (val.match(reg) || val.match(pattern)) {
uni.showToast({
icon: 'none',
title: '不可输入特殊字符'
})
return false
}
return true
}
2. 身份证号
export function checkIDCode(val) {
var idCardReg =
/^(^[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{4})|\d{3}[Xx])$)$/;
if (val == '') {
uni.showToast({
title: '身份证号不可为空',
icon: 'none'
})
return false
}
if (!idCardReg.test(val)) {
uni.showToast({
title: '请输入正确的身份证号',
icon: 'none'
})
return false
}
return true
}
3. 车牌号
export function checkCar(val) {
var result =
/^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/
.test(val);
if (val == '') {
uni.showToast({
title: '车牌号码不可为空',
icon: 'none'
})
return false
}
if (result == false) {
uni.showToast({
title: '请输入正确的车牌号码',
icon: 'none'
})
return false
}
return true
}
4.手机号码
export function checkMobile(mobile) {
mobile += '';
if (mobile == '') {
uni.showToast({
title: '手机号不可为空',
icon: 'none'
})
return false
}
if (!(/^1[3456789]\d{9}$/.test(mobile))) {
uni.showToast({
title: '请输入有效的手机号码',
icon: 'none'
})
return false
}
return true
}
5. 页面上引用
比如手机号码
import checkMobile from '@/utils/checkMobile.js';
html 部分代码
<view class="inputLi">
<view class="left">
<text class="star">*</text>手机号码
</view>
<input type="number" :disabled="showTime == true || cardShow == true ? 'disabled':''" maxlength="11"
v-model="phoneNumber" @blur="checkMobile(phoneNumber)" class="inputBox"
placeholder="请输入手机号码"></input>
</view>
js部分代码 其中this.phoneNumber = this.phoneNumber.replace(/[, ]/g,'') e = e.replace(/[, ]/g,'') 是用来清除前后左右空格的
checkMobile(e) {
this.phoneNumber = this.phoneNumber.replace(/[, ]/g,'')
e = e.replace(/[, ]/g,'')
return checkMobile.checkMobile(e);
},