vue.js表单验证插件vee-validate怎么用-创新互联
这篇文章主要为大家展示了“vue.js表单验证插件vee-validate怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue.js表单验证插件vee-validate怎么用”这篇文章吧。
成都创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：
成都网站设计、成都做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的
烈山网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
特别提示
配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样
插件既可以应用于SPA也可以应用于多页面，通用性强
安装
单页安装
npm install vee-validate --save
浏览器安装
引入项目
单页引入
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
浏览器引入
基础使用
Email
代码解析
| v-validate=”‘required | email'” |
v-validate 是由该插件提供的指令 作用于html上
| “‘required | email'” 字段验证的规则，注意双引号之内必须有单引号，多个规则之间用 | 连接 |
errors.first(‘email') email字段验证不通过时显示相关联的提示信息
验证规则
地址
进一步学习
本地化
使用本地化功能可以让错误提示换成中文
单页中使用
浏览器中使用
var dict = {
zh_CN: {
messages: {
required: function(field){
return '请输入' + field ;
},
confirmed: function(field) {
return '两次输入的密码不一致';
}
},
attributes: {
OldPassword: '旧密码',
NewPassword: '新密码',
ConfirmNewPassword: '确认密码',
}
}
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});代码解析
VeeValidate（浏览器引入js后建立了一个全局对象）
dict 翻译的内容，其中attributes对象表示字段，messages对象表示提示信息
本地化进一步参考
常用方法
出错渲染
字段验证不通过时渲染提示信息时使用
errors.first(‘field') 显示字段field的第一个出错信息
errors.collect(‘field') 显示字段field的所有出错信息
errors.has(‘field') 判断fileds字段是否检验有误
erros.all() 显示所有的出错信息
errors.any() 判断是否有错误
手动检验
常用于数据提交（写在vue的方法内部）
this.$validator.validate(‘field'); 校验单个字段
this.$validator.validateAll(); 表单整体校验
代码片段
this.$validator.validateAll().then(function(result) {
if (result) {
//成功操作
} else {
// 失败操作
}
})检验信息清除
常用于校验成功后清除错误的提示信息
this.errors.clear();
以上是“vue.js表单验证插件vee-validate怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
名称栏目：vue.js表单验证插件vee-validate怎么用-创新互联
链接URL：
http://kswsj.cn/article/cspejc.html
