四川盐亭网站制作公司

vue.js表单验证插件vee-validate怎么用

这篇文章主要为大家展示了“vue.js表单验证插件vee-validate怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue.js表单验证插件vee-validate怎么用”这篇文章吧。

十年的灵宝网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整灵宝建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“灵宝网站设计”,“灵宝网站推广”以来，每个客户项目都认真落实执行。

特别提示

配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样

插件既可以应用于SPA也可以应用于多页面，通用性强

vue.js表单验证插件vee-validate怎么用

安装

单页安装

npm install vee-validate --save

浏览器安装

 
 

引入项目

单页引入

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

浏览器引入

 
 
 

基础使用


 Email
 
 
 
 

代码解析

v-validate=”‘requiredemail'”

v-validate 是由该插件提供的指令 作用于html上

“‘requiredemail'” 字段验证的规则，注意双引号之内必须有单引号，多个规则之间用连接

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怎么用
文章地址：http://scyanting.com/article/jhedei.html

其他资讯