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: [
    {
      req