VeeValidate的使用总结

一、安装和引入

npm install vee-validate --save
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

二、配置组件

const config = {
  aria: true,
  classNames: {},
  classes: false,
  delay: 0,
  dictionary: null,
  errorBagName: 'errors', // change if property conflicts
  events: 'input|blur',
  fieldsBagName: 'fields',
  i18n: null, // the vue-i18n plugin instance
  i18nRootKey: 'validations', // the nested key under which the validation messages will be located
  inject: true,
  locale: 'en',
  validity: false,
  useConstraintAttrs: true
};
Vue.use(VeeValidate, config);

delay代表输入多少ms之后进行校验，events代表验证的事件，strict=true代表没有设置规则的表单不进行校验，errorBagName属于高级应用，自定义errors，待研究,其他有查看官网

三、关于关于errors

errors.first('field') - 获取关于当前field的第一个错误信息
collect('field') - 获取关于当前field的所有错误信息(list)
has('field') - 当前filed是否有错误(true/false)
all() - 当前表单所有错误(list)
any() - 当前表单是否有任何错误(true/false)
add(String field, String msg) - 添加错误
clear() - 清除错误
count() - 错误数量
remove(String field) - 清除指定filed的所有错误

四、使用中文错误提示

import zh_CN from './assets/zh_CN';   //  '/assets/js/zh_CN'代表你存放语言包的目录，从node_modules/vee-validate/dist/locale目录下面拷贝到你的项目
Validator.localize(zh_CN);
Vue.use(VeeValidate, {
  locale: 'zh_CN',
})

五、修改默认的错误提示信息

//修改默认错误提示
const dictionary = {
  zh_CN: {
    messages: {
      email: () => '邮箱格式不正确哦'
    }
  }
};
Validator.localize(dictionary);

六、自定义规则

Validator.extend('qq', {
  messages: {
    zh_CN:field => 'qq号码输入不正确'
  },
  validate: value => {
    return /^[1-9][0-9]{4,14}$/.test(value);
  }

七、例子
HTML部分

 

                
请填写您要荐购的书籍信息：
                

                    

                        

                            书 名：
                            
                        
                        
{{ errors.first('title') }}
                    
                    

                        

                            作 者：
                            
                        
                        
{{ errors.first('author') }}
                    
                    

                       

                           出版社：
                            
                        
                       
{{ errors.first('publisher') }}
                    
                    
                  
                        

                            出版年：
                            
                        
                        
{{ errors.first('pubYear') }}
                    
                    

                        

                            语言类型：
                            
                        
                        
{{ errors.first('type') }}
                    
                    

                        

                            ISBN号：
                            
                        
                        
{{ errors.first('isbn') }}
                    

                    

                        

                            推荐理由：
                            
                        
                        
{{ errors.first('remark') }}
                    
                     

                         
提交
                     
                 
            

JS部分