vue中自定义validator

[AnnVoV]

背景

element-ui中使用了async-validator做一些校验，基本情况下都能满足, 有时候我们需要按照一个中文2个字符的计算规则去校验，这时候就需要我们自定义一个validator

正确方式

比较好的做法应该是抽出一个自定义validator文件，放在common文件夹下面

// common/validator.js
import _ from './utils';
export default {
  chineseLength(title, maxLength) {
    return (rule, value, cb) => {
      if (_.length(value) > maxLength * 2) {
                return callback(new Error(`${title}不能超过${maxLength}个中文汉字!`))
            } else {
                callback();
            }
    }
  }
}

这样我们在使用时只需要

...
rules: {
                    title: [
                        {required: true, message: '主题不能为空', trigger: TRIGGER},
                        {validator: Validator.chineseLength('主题', 12), trigger: 'blur'}
                    ],
                    subTitle: [
                        {required: true, message: '副标题文案不能为空', trigger: TRIGGER},
                        {validator: Validator.chineseLength('副标题文案', 20), trigger: 'blur'}
                    ]
}
...