vue中的正則表達式校驗、驗證

更新時間：2023年06月08日 10:07:04 作者：String佳佳

這篇文章主要介紹了vue中的正則表達式校驗、驗證方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue正則表達式校驗、驗證

1.el-form表單校驗

el-form添加rules屬性，基礎用法見elementUI官網；
el-form添加rules屬性，通過正則表達式自定義校驗，用法如下：

?? ??? ?data() {
?? ??? ??? ?let validatorTelAndMobile = function (rule, value, callback) {
? ? ? ? ? ? ? if (!value) {
? ? ? ? ? ? ? ? return callback(new Error('請輸入聯(lián)系電話'));
? ? ? ? ? ? ? }
? ? ? ? ? ? ? let isTel = /^(0\d{2,3}-){0,1}\d{6,8}$/.test(value);
? ? ? ? ? ? ? let isMobile = /^1[34578]\d{9}$/.test(value);
? ? ? ? ? ? ? if (isTel || isMobile) {
? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? callback(new Error('請輸入正確的聯(lián)系電話'));
? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return {
? ? ? ? ? ? ?? ?rules:{
? ? ? ? ? ? ?? ??? ?telephone:[
? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? validator: validatorTelAndMobile, required: true, trigger: ['blur', 'change']
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ?? ?}
? ? ? ? ? ? }
?? ??? ?}

el-form-item添加rules屬性（行內校驗），用法如下：

<el-form-item label="年齡：" prop="age" :rules="[{pattern: /^[0-9]*$/, message: '年齡只能為數(shù)字', trigger: 'blur'}]">
? ? <el-input v-model="user.age"></el-input>
</el-form-item>
?<el-form-item label="郵箱：" prop="email" :rules="{ required: true, message: '必須輸入郵箱', trigger: 'blur'}">
? ? ?<el-input v-model="newJgInfoXZ.nsdz"></el-input>
</el-form-item>

2.純el-input標簽內校驗

<el-input v-model="age" ?oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>

3.正則表達式在代碼中驗證字符串

/^[0-9]+([.][0-9]{1,2})?$/.test(待驗證的字符串或者數(shù)字)

4.一些常用的正則表達式

10-32位數(shù)字或字母：----------/^[a-zA-Z0-9]{10,32}$/ ? ??
手機號：---------------------/^1[34578]\d{9}$/ ? ? ? ? ?
座機號：---------------------/^(0\d{2,3}-){0,1}\d{7,8}$/ ? ?
整數(shù)：-----------------------/^[0-9]+$/ ? ? ? ? ?
不能包含中文：-----------------/^[^\u4e00-\u9fa5]+$/ ??
只能全是中文：-----------------/^[\u4e00-\u9fa5]+$/ ? ?
只能數(shù)字，且不能超過2位小數(shù)：--/^[0-9]+([.][0-9]{1,2})?$/ ? ??
15或18位身份證號：------------/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ ? ?
士官證號,例如：軍字第2001988號：----/^[\u4E00-\u9FA5](字第)([0-9a-zA-Z]{4,8})(號?)$/ ?
3至21位戶口本號：------------------/^[a-zA-Z0-9]{3,21}$/ ? ??
15或者17或者18或者20位字母、數(shù)字組成：---/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/ ?
至少12個字符，其中需包含大小寫字母，2位以上數(shù)字和2位以上符號-----/(?=.*?[A-Z].*?)(?=.*?[a-z].*?)(?=.*?[0-9].*?[0-9])(?=.*?[~!@#$%^&*()_+|<>,.?/:;'\[\]{}\"].*?[~!@#$%^&*()_+|<>,.?/:;'\[\]{}\"])^\S{12,}$/
郵箱：------------------------/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ ? ?
2020/05/21格式日期：----------(/^[0-9]{4}\/[0-9]{1,2}\/[0-9]{1,2}$/
正數(shù) 大于等于0的整數(shù)或者小數(shù) ?>=0 float------/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
正數(shù) 大于0的整數(shù)或者小數(shù) ?>0 float----------/^[+]{0,1}[1-9][0-9]*$|^[+]{0,1}(\d+\.\d+)$/
正整數(shù) 大于等于0的整數(shù) >=0 int----------/^[+]{0,1}(\d+)$/
正整數(shù) 大于0的整數(shù) >0 int--------------/^\+?[1-9][0-9]*$/
0-300整數(shù)------------------------/^[0-9]$|^[0-9]{2}$|^[1,2][0-9]{2}$|^[3][0][0]$/
長度至少5，必須包含數(shù)字和大小寫（可以含特殊字符）-----/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{5,}$/
長度至少5，必須包含數(shù)字和大小寫（不能含特殊字符）-----/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{5,}$/

vue判斷是否是數(shù)字的正則表達式

判斷是否是數(shù)字的正則表達式

var numReg = /^[0-9]*$/
var numRe = new RegExp(numReg)
if (!numRe.test(number)) {
? this.$message({
? ? type: 'warning',
? ? message: '請輸入數(shù)字 ',
? ? duration: 10000,
? ? showClose: true,
? })
? return false
}