1. // utils/validator.js
    2. import {isArray, isFunction} from "@/utils/dataType";
    3. import {Message} from "element-ui";
    5. const validatorEmpty = function (value) {
    6.   return !!value;
    7. }
    9. const validatorMinLength = function (value, ruleValue) {
    10.   return value.length >= ruleValue
    11. }
    13. const validatorMaxLength = function (value, ruleValue) {
    14.   return value.length <= ruleValue
    15. }
    17. const validatorLength = function (value, ruleValue) {
    18.   return value.length <= ruleValue
    19. }
    21. const validatorEqual = function (value, ruleValue) {
    22.   return value !== ruleValue
    23. }
    25. const Validator = function (value, ruleValue) {
    26.   this.value = value
    27.   this.ruleValue = ruleValue
    28. }
    30. const systemMethodMap = {
    31.   'empty': validatorEmpty,
    32.   'minLength': validatorMinLength,
    33.   'maxLength': validatorMaxLength,
    34.   'length': validatorLength,
    35.   'equal': validatorEqual
    36. }
    38. const systemMethodMapKeys = Object.keys(systemMethodMap)
    39. for (let systemMethodMapKey of systemMethodMapKeys) {
    40.   Validator.prototype[systemMethodMapKey] = function() {
    41.     return systemMethodMap[systemMethodMapKey](this.value, this.ruleValue)
    42.   }
    43. }
    45. export const validatorForm = function (rules) {
    46.   let _validate = false
    47.   if (isArray(rules)) {
    48.     for (let i = 0; i < rules.length; i++) {
    49.       let item = rules[i]
    50.       let {value, rule, errorMsg, validator} = item
    51.       let validate = false
    52.       if (rule) {
    53.         if (rule.includes(':')) {
    54.           const ruleArray = rule.split(':')
    55.           const ruleValue = ruleArray[1]
    56.           rule = ruleArray[0]
    57.           validate = new Validator(value, ruleValue)[rule]()
    58.         } else {
    59.           validate = new Validator(value)[rule]()
    60.         }
    61.         if (!validate) {
    62.           _validate = validate
    63.           Message.warning(errorMsg)
    64.           break
    65.         }
    66.       } else if(isFunction(validator)) {
    67.         const errMsg = validator(value)
    68.         if (errMsg) {
    69.           _validate = validate
    70.           Message.warning(errorMsg)
    71.           break
    72.         }
    73.       }
    74.     }
    75.   }
    76.   return _validate
    77. }

    使用
    image.png

    rules是一个数组，每一项是一个对象，该对象有4个参数
    value 要验证的值
    rule 内置规则名称
    errorMsg 错误提示
    validator 自定义验证函数， 返回错误信息
    当使用rule是，则无法使用自定义验证函数