1 创建一个对象,存放需要验证的内容以及正则规则
let obj = {
phone: {
// 验证数据:用户输入的手机号
value: this.userInfo.phone,
// 验证格式 安装插件any-rule @zz
regExp: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
// 验证不通过,提示信息 toast
errmsg: '手机号码格式不正确',
},
// 密码强度验证
password: {
// 验证数据:用户输入的密码
value: this.userInfo.password,
// 验证格式 安装插件any-rule @zz
regExp: /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/,
// 验证不通过,提示信息 toast
errmsg: '密码格式不正确',
},
}
2 验证表单的逻辑
import { Toast } from 'vant';
Vue.use(Toast);
import Vue from 'vue';
class ValidForm {
// 验证表单
valid(obj) {
// 遍历对象
for (let key in obj) {
// 验证正则 正则规则.test(value) 通过true,否false
if (!obj[key].regExp.test(obj[key].value)) {
// 表单验证不通过
Toast(obj[key].errmsg);
return false;
}
}
// 表单验证通过
return true;
}
}
// 实例化对象,并共享实例
export const validForm = new ValidForm();
3 导入表单验证脚本
import { validForm } from '../assets/js/validForm.js'
4 调用表单验证的方法
let isPass = validForm.valid(obj)