Vue:如何添加表单自定义校验

我们在利用vue写后台的时候，在注册登录，添加数据等很多场景都会用到表单校验，通常情况下一般如下操作：

1. 给 el-form组件 添加属性 :rules=addFormRules",然后在data中书写addFormRules校验规则

// 添加表单的验证规则对象
      addFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '用户名长度在3个到10分字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '密码长度在6个到15分字符之间', trigger: 'blur' }
        ]
      },

表单自定义校验

上面的这种方式只能进行简单的校验，如果对于邮箱或者手机号想要有更准确的校验方式，那就要用到自定义校验：

1. 在data中直接定义邮箱和手机号的校验规则，这里利用正则表达式进行更精准的验证

// 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      // 验证邮箱的正则表达式
      const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_