[JavaScript知识库]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_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (regEmail.test(value)) {
        // 合法对象
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }
    // 验证手机号规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的规则
      const regMobile = /^0{0,1}(13[0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      return cb(new Error('请输入合法的手机号'))
    }

2. 在对应的表单验证中添加 validator: 属性，对应上面自定义的校验规则

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