vee-validate的安装与使用

vee-validate的安装与使用

工具：idea、一个vue项目

相关代码

代码	作用
npm install vee-validate@2.0.0-rc.25	安装vee-validate
import VeeValidate,{Validator} from ‘vee-validate’;	导入vee-validate
import zh from ‘vee-validate/dist/locale/zh_CN’;	引入中文文件
Vue.use(VeeValidate, config);	使用vee-validate

1、安装vee-validate

npm install vee-validate@2.0.0-rc.25

2、建立validate配置文件

2.1、首先在src目录下创建validate.js

2.2、然后再main.js中引入

import './validate';		//导入表单验证

3、编写validate配置文件

import Vue from 'vue';
import VeeValidate, {Validator} from 'vee-validate';
import zh from 'vee-validate/dist/locale/zh_CN';         //引入中文文件
Validator.addLocale(zh);
const config = {
  locale: 'zh_CN',
  fieldsBagName: 'fieldBags',
};
Vue.use(VeeValidate, config);

// 自定义validate
const dictionary = {
  zh_CN: {
    attributes: {
      idCard: '身份证号码',
      userName: '输入用户昵称',
      mobile: '输入手机号码',
    }
  }
};
Validator.updateDictionary(dictionary);

其中，attributes中的属性可以任意填写

在配置文件中可以编写全局自定义验证

//全局自定义验证
Validator.extend('name', {
  messages: {
    zh_CN: field => '错误信息'
  },
  validate: (value,args) => {
  	//args是参数(可空)
    //true表示验证通过，false表示验证失败
    return true;
  }
});

4、页面上使用

4.1、在mounted()中添加自定义的验证规则(在这里定义的就不是全局验证规则)

代码	作用
this.$validator	Validator实例

mounted() {
    this.$validator.extend('nameValidator', {
        messages: {
          zh_CN: field => '用户昵称不允许特殊符号'
        },
        validate: (value, args) => {
          return 
         /^[\u4e00-\u9fa5A-Za-z0-9]*$/.test(value);
        },
      });
  },

4.2、使用验证

属性	用法
v-validate	与验证规则名一致
name	与配置文件中的attributes属性名一致，必须要有

<div>
      <input v-validate="'nameValidator'" 
      				name="idCard" type="text"/>
      <span v-show="errors.has('idCard')">
      	 {{ errors.first('idCard') }} 
      </span>
</div>

注意：
1、v-validate是需要双引号，然后单引号(v-validate=“ ‘ ’ ”)
2、多个验证使用|，v-validate=“ ‘ A|B’ ”
3、v-show的值要与name一致

5、页面效果

End