vue element-ui rules 封装

新建validator.js，内容如下，参考补充：

const valid = {
  REG_PHONE: /^[1]([3-9])[0-9]{9}$/,
  checkNull(rule, value, callback, message, flag = true) {
    if (isNullOrEmpty(value)) {
      callback(new Error(message))
    }
    if (flag) {
      callback()
    }
  },
  checkSelect(rule, value, callback, message, flag = true) {
    if (isNullOrEmpty(value)) {
      callback(new Error(message))
    }
    if (flag) {
      callback()
    }
  },
  checkMultiSelect(rule, value, callback, message, flag = true) {
    if (isEmpty(value)) {
      callback(new Error(message))
    }
    if (flag) {
      callback()
    }
  },
  checkByRegex(rule, value, callback, regex, message, flag = true) {
    if (!regex.test(value)) {
      callback(new Error(message))
    }
    if (flag) {
      callback()
    }
  }
}

function isEmpty(value) {
  return value.length === 0
}

function isNullOrEmpty(value) {
  if (!value) {
    return true
  }
  return value.trim() === ''
}

export default valid

使用方式：

注：如果有多个判断，除最后一条判断外，之前的判断，flag参数应为false

import valid from '@/utils/validator'

rules: {
  loginForm: {
    phone: [
      {
        required: true, trigger: 'blur',
        validator: (rule, value, callback) => {
          valid.checkNull(rule, value, callback, '请输入手机号', false)
          valid.checkByRegex(rule, value, callback, valid.REG_PHONE, '手机号不合法')
        }
      }
    ]
  }
}

虽然参数多了一些，但是复用性和灵活性得到改进。

方法，正则，消息都可以统一管理，这种好处不必多说。

rules的使用方式不变，在form中引用即可。

另外，补充下，在某些情况下可能需要对form中的某个字段进行验证，可以使用如下方法：

this.$refs.form.validateField('phone', (v) => {
    if (v) {
      return false
    } else {
      doSomething()
    }
})