详解vee-validate的使用个人小结


Posted in Javascript onJune 07, 2017

学习vee-validate,首先可以去阅读官方文档,更为详细可以阅读官网中的规则。英文文档可能会有不理解的地方,推荐大家看这篇博客

下面来简单总结一下我的使用:

一、安装

npm install vee-validate@next --save

后面加@next是为了安装vue2.0的版本

二、引入

我使用的是vue-cli脚手架工具,需要在main.js中

import VeeValidate from 'vee-validate'

Vue.use(VeeValidate);

三、简单的使用

这个时候其实已经可以使用了,先上demo

<div>
    <label for="email">邮箱:</label>
    <input v-validate ="'required|email'" type="text" id="email" name="myEmail">
  </div>
  <span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>

解释一下:v-validate后面的required和email是官方已经规定好的几种默认错误类型中的两个,这个可以阅读官方文档。
span中用到了errors的几个方法,这里的参数都是定义了验证规则的表单的name。列举几个errors的方法:

1、first(‘field')

field中(也就是刚刚说过的name表单)中的第一个错误

2、collect(‘field')

field中所有的错误

3、has(‘field')

field中是否有错误

4、all()

当前表单中的所有错误

5、any()

当前表单中是否有错误

6、count()

当前表单中的错误数量

7、clear()

清除当前表单中的所有错误

四、使用中文错误提示

没有配置过的错误提示默认使用英文显示的,如果想要用中文显示需要我们手动配置一下

首先还是在main.js中引入

import zh_CN from 'vee-validate/dist/locale/zh_CN'
import { Validator } from 'vee-validate';

紧接着再加一句

Validator.addLocale(zh_CN);

最后需要把第一步的Vue.use(VeeValidate)改为

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

现在错误提示已经是中文了

五、配置组件

上一点中的配置中文其实已经是对组件的配置了,再说一说其他的配置。

//配置
const config = {
 errorBagName: 'errors', // change if property conflicts.
 fieldsBagName: 'fields',
 delay: 0,
 locale: 'zh_CN',
 strict: true,
 enableAutoClasses: false,
 classNames: {
  touched: 'touched', // the control has been blurred
  untouched: 'untouched', // the control hasn't been blurred
  valid: 'valid', // model is valid
  invalid: 'invalid', // model is invalid
  pristine: 'pristine', // control has not been interacted with
  dirty: 'dirty' // control has been interacted with
 },
 events: 'blur',
 inject: true
};
Vue.use(VeeValidate, config);

delay是指对错误提示的延迟时间;locale就是上一点中对中文的配置,只是这里统一写到了config中;strict=true代表没有设置规则的表单不进行校验,events默认是input|blur,就是在用户输入和表单失去焦点时都进行校验,这里我改成了blur,即只有失去焦点时才开始验证。

五、修改默认的错误提示信息

//修改默认错误提示
const dictionary = {
 zh_CN: {
  messages: {
   email: () => '邮箱格式不正确哦'
  }
 }
};
Validator.updateDictionary(dictionary);

demo中修改了email的错误提示信息,因为使用的中文(前面引入的),所以是zh_CN。最后用updateDictionary方法加入到Validator中。

六、自定义规则

Validator.extend('qq', {
 messages: {
  zh_CN:field => 'qq号码输入不正确'
 },
 validate: value => {
  return /^[1-9][0-9]{4,14}$/.test(value);
 }
});

extend的第一个参数就是自定义的规则的名字,可以像使用默认规则一样使用它,messages中是错误提示信息,validate是验证规则,返回一个布尔值或promise.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
js实现抽奖功能
Nov 24 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
微信小程序多张图片上传功能
Jun 07 #Javascript
Vue.js对象转换实例
Jun 07 #Javascript
深入理解Angular4中的依赖注入
Jun 07 #Javascript
Vue中保存用户登录状态实例代码
Jun 07 #Javascript
jquery dataTable 后台加载数据并分页实例代码
Jun 07 #jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 #jQuery
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 #Javascript
You might like
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
香港通票:Hong Kong Pass
2019/02/26 全球购物
Perfume’s Club德国官网:在线购买香水
2019/04/08 全球购物
争论的故事教学反思
2014/02/06 职场文书
解除租房协议书
2014/12/03 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python