VUE+vee-validate使用记录

1.安装版本，原本我是直接安装最新版本的，但是会出现一下报错

所以直接安装以下版本可以避免

cnpm install vee-validate@2.0.0-rc.25 --save

2.新建一个validate.js的文件，存放验证配置

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';//引入中文包文件
import { Validator } from 'vee-validate';

Validator.addLocale(zh_CN);

Vue.use(VeeValidate, {
  locale: 'zh_CN',
});

//可自定义表单验证的提示语，也可默认
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        email:'邮箱',
        password:'密码',
        // and so on
      }
  }
};
 
Validator.updateDictionary(dictionary);
 
//自定义验证格式
Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必须是11位手机号码',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

3.在main.js 中引用定义的文件；

import "./validate/validate"  //自己的存放路径

4.使用方式

<input v-model="name" v-validate="'required'" type="text" name="name" placeholder="用户名">
<span v-show="errors.has('name')" class="text-style" v-cloak> {{ errors.first('name') }} </span>

a、与验证对应的是 name 属性值。
b、v-validate 属性：管道形式进行过滤，验证条件。
b、span 里边是错误提示，也可以根据实际界面情况放在对应位置 。

5. 关于可能会出现的属性冲突

j解决方案：

// 在使用element-ui+vee-validate（会报冲突， 因为elmentui中fields属性已使用）
import VeeValidate from 'vee-validate';
const config = {
    errorBagName: 'errorBags',
    fieldsBagName: 'fieldBags',
};
Vue.use(VeeValidate, config);