vue中的正则表达式校验、验证
作者: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('请输入联系电话')); } 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('请输入正确的联系电话')); } } 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: '年龄只能为数字', 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(待验证的字符串或者数字)
4.一些常用的正则表达式
10-32位数字或字母:----------/^[a-zA-Z0-9]{10,32}$/ 手机号:---------------------/^1[34578]\d{9}$/ 座机号:---------------------/^(0\d{2,3}-){0,1}\d{7,8}$/ 整数:-----------------------/^[0-9]+$/ 不能包含中文:-----------------/^[^\u4e00-\u9fa5]+$/ 只能全是中文:-----------------/^[\u4e00-\u9fa5]+$/ 只能数字,且不能超过2位小数:--/^[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位字母、数字组成:---/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/ 至少12个字符,其中需包含大小写字母,2位以上数字和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}$/ 正数 大于等于0的整数或者小数 >=0 float------/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/ 正数 大于0的整数或者小数 >0 float----------/^[+]{0,1}[1-9][0-9]*$|^[+]{0,1}(\d+\.\d+)$/ 正整数 大于等于0的整数 >=0 int----------/^[+]{0,1}(\d+)$/ 正整数 大于0的整数 >0 int--------------/^\+?[1-9][0-9]*$/ 0-300整数------------------------/^[0-9]$|^[0-9]{2}$|^[1,2][0-9]{2}$|^[3][0][0]$/ 长度至少5,必须包含数字和大小写(可以含特殊字符)-----/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{5,}$/ 长度至少5,必须包含数字和大小写(不能含特殊字符)-----/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{5,}$/
vue判断是否是数字的正则表达式
判断是否是数字的正则表达式
var numReg = /^[0-9]*$/ var numRe = new RegExp(numReg) if (!numRe.test(number)) { this.$message({ type: 'warning', message: '请输入数字 ', duration: 10000, showClose: true, }) return false }
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。