对vee-validate的封装使用

作为前端，表单验证很重要了。本博客主要介绍对vee-validate在实际项目中进一步封装使用。 

1. 引入vee-validate 

• npm install [email protected]

   

• 注意版本号，此版本中文包支持的最好。

 

2. 引入基本配置，在main.js里加入下面代码

//validator
    import VeeValidate, {Validator} from 'vee-validate'
    import zh from 'vee-validate/dist/locale/zh_CN'// 引入中文文件
    // 配置中文
    Validator.addLocale(zh)    const config = {
      errorBagName: 'errors', // change if property conflicts.
      fieldsBagName: 'fieldBags',  // 报冲突时 可自定义修改字段名称
      delay: 0, // 错误提示的延迟时间
      strict: true, // 没有设置规则的表单不进行校验，
      enableAutoClasses: false,
      locale: 'zh_CN', // 对语言（中文）的配置
      classNames: {
        touched: 'touched', // the control has been blurred
        untouched: 'untouched', // the control hasn't been blurred
        valid: 'valid', // model is valid
        invalid: 'invalid', // model is invalid
        pristine: 'pristine', // control has not been interacted with
        dirty: 'dirty' // control has been interacted with
      },
      events: 'input', //* *input|blur** 在用户输入和表单失去焦点时都进行校验 可单独写  blur或input
      inject: true
    }
    Vue.use(VeeValidate, config)

3. 提交逻辑添加，加入新validate.js，逻辑为点击提交按钮遍历所有具有验证规则的表单，如果有错误，提示表单第一个错误，如果没有，执行成功函数。

function FormValidateAll(success){
    this.$validator.validateAll().then((result) => {        
    if (result) {
        success(result);            // console.log(result)
        return;
        };        // failure();
        let errs = this.errors.all();        
        if(errs.length>0){            
            this.$toast({
             message: errs[0],
             duration: 1500
            });            
         return;
        }
    });
}
export default FormValidateAll;

4. 在main.js中引入validate.js，并全局绑定

//封装校验方法
import validate from './js/validate.js'
Vue.prototype.$validate = validate

5. 页面使用

保存

     submit(){   this.$validate(async rese => {     //执行方法   }) }

5. tip 
验证规则可以自我添加，也可自定义添加

  // 自定义
validateconst dictionary = {
  zh_CN: {
    messages: {
      email: () => '请输入正确的邮箱格式',
      required: (field) => '请填写信息哦~'
    },
    attributes: {
      email: '邮箱',
      password: '密码',
      phone: '手机',
      signlessInteger: '正整数',
      bankCard: '银行卡号',
      idCard: '身份证号'
    }
  }
}

Validator.updateDictionary(dictionary)

Validator.extend('phone', {
  messages: {
    zh_CN: field => '请输入正确的手机号'
  },
  validate: value => {    
  return value.length === 11 && /^((13|14|15|17|18|19)[0-9]{1}d{8})$/.test(value)
  }
});

深入学习可参考https://baianat.github.io/vee-validate/