【备忘录】vee-validate 2.0.6版本 例子 （踩过的坑。。

1. 自定义部分rule的message

import VeeValidate, { Validator } from 'vee-validate'
// update custom messages
Validator.dictionary.merge({
  en: {
    messages: {
      required() {
        return 'IS_REQUIRED';
      },
      email() {
        return 'EMAIL_ERRORMSG'
      }
    }
  }
});

2. 添加自定义rule

import { validateRules } from './common/validation'
// extend custom validator
Object.keys(validateRules).forEach((key) => {
  Validator.extend(key, validateRules[key]);
});

// in validation.js
export const validateRules = {
  mobile: { // 手机
    validate(value) {
      if (!value) return true;
      var test = /^1\d{10}$/.exec(value);
      return value.length === 11 && test && test[0].length === 11;
    },
    getMessage(field) {
      return 'CELLPHONE_ERRORMSG'
    }
  },
  ......
}

 3. 动态组件内部更改值触发外面表单验证（用全局event bus）

// 组件内部改变值的地方
this.$nextTick(() => {
    if(this.field) this.$eventHub.$emit('trigger:validate', this.field);
});

this.$eventHub.$on('trigger:validate', arg => {
    this.$validator.validate(arg);
});

 4. 表单验证状态

computed: {
    formValid() {
        return Object.keys(this.fields).every(field => {
            return this.fields[field] && this.fields[field].valid;
        });
    }
}

 5. 单独重置某个field验证状态

let field = this.$validator.fields.find({name: fieldName});
field && field.reset();