vue 通过自定义规则实现表单手机号和邮箱的校验

1.在data的最前面通过var定义变量来定义一个箭头函数

data(){//校验邮箱的规则var checkEmail = (rule, value, callback) => {const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!reg.test(value)){callback(new Error('请输入有效的邮箱'));}callback();}// 验证手机号的规则var checkMobile = (rule, value, callback) => {const reg=/^1[3456789]\d{9}$/;if(!reg.test(value)){callback(new Error('请输入有效的手机号码'));}callback();}

其中：

通过reg.test(value)来判断输入的值是否符合校验规则。

callback()：函数代表通过校验。

new Error('请输入有效的手机号码')：通过新建一个Error对象表示校验失败。

2.在表单的验证规则对象的属性中加入新定义的变量

addFormRules: {

email: [{required: true,message: '请输入邮箱',trigger: 'blur'}, {validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '请输入手机号',trigger: 'blur'}, {validator: checkMobile,trigger: 'blur'}]}