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