前言
最近遇到了表单验证,验证是否是手机号码和座机号码,要是是的话通过验证,要是不是的话,则文字提示。因为自己不是很熟练这一部分,故写篇笔记记录一下,以免后面自己忘记或者混淆。
业务场景
手机号码是1xx-xxxx-xxxx的形式,座机号码是0xxx-xxxxxxxx的形式(其中x代表数字),则通过联系电话的验证,要是其他格式,则不通过验证。
解决
这里是表单的代码,表单上面绑定了rules。
<el-col :span="8">
<el-form-item label="联系电话:" prop="telephone" label-width="160px" >
<el-input v-model="form.telephone" type="text"></el-input>
</el-form-item>
</el-col>
然后在rules里面加上联系电话的规则,在validator里面写上上面声明的验证规则定义的参数,我这边写的是checkPhone,注意要统一。然后在checkPhone里面就有手机号和座机号码的验证了。
data(){
var checkPhone = (rule, value, callback) => {
if (value === '') {
callback(new Error('联系电话不可为空!'));
} else {
let regPone = null;
let mobile = /^1(3|4|5|6|7|8|9)\d{9}$/; //最新16手机正则
let tel = /^(0\d{2,3}-){0,1}\d{7,8}$/; //座机
if (value.charAt(0) == 0) { // charAt查找第一个字符方法,用来判断输入的是座机还是手机号
regPone = tel;
} else {
regPone = mobile;
}
if (!regPone.test(value)) {
callback(new Error("请输入正确的电话格式!"))
}
callback();
}
}
return{
rules: {
telephone: [
{
required: true,
trigger: "blur",
validator: checkPhone
}
],
}
}
}