最近参加前端项目过程中,发现有一些验证是经常会用到的,每次用到都会耗费时间查询对应的正则表达式,干脆梳理一份常用正则表达式验证清单出来。验证是基于vue项目的表单的rule规则来进行编写的。
<script>
export default {
data(){
/* 具体的验证规则---开始--- */
// 1.身份证号码验证
var verifyIdentityCard= (rule, value, callback) => {
var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(!(reg.test(value))){
callback({ field: "identityCard", message: "身份证号码错误" });
}else{
callback();
}
},
// 2.手机号码验证
var verifyPhoneNumber= (rule, value, callback) => {
if(!(/^1[3456789]\d{9}$/.test(value))){
callback({ field: "phoneNumber", message: "手机号码错误" });
}else{
callback();
}
},
// 3.校验是否为数字
var checkNumberStr = (rule,value,callback)=>{
if (!value) {
callback({field: "numberStr", message: "值不能为空"});
} else if (!(/^[1-9][0-9]*$/.test(value))) {
callback({field: "numberStr", message: "格式不正确【请输入数字类型】"});
} else {
callback();
}
};
/* 具体的验证规则---结束--- */
return {
form:{
identityCard: "",// 身份证号码
phoneNumber: "", // 手机号码
numberStr: null, // 数字
},
rules: {
identityCard: [
{ required: true, validator: verifyIdentityCard, trigger: "blur" }
],
phoneNumber: [
{ required: true, validator: verifyPhoneNumber, trigger: "blur" }
],
numberStr: [
{ required: true, validator: checkNumberStr, trigger: "blur" }
],
},
}
}
}
</script>
至于字符串长度输入限制,一般不在rule里面做限制,而是使用maxlength=”150“属性来限制输入长度。
后续持续补充…