详解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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
js的逻辑运算符 ||
May 31 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
JS实现图片切换效果
Nov 17 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue实现开心消消乐游戏算法
Oct 22 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php+js实现百度地图多点标注的方法
2016/11/30 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
[00:14]护身甲盾
2019/03/06 DOTA
详解Django中类视图使用装饰器的方式
2018/08/12 Python
python每天定时运行某程序代码
2019/08/16 Python
python实现TCP文件传输
2020/03/20 Python
python初步实现word2vec操作
2020/06/09 Python
Python3合并两个有序数组代码实例
2020/08/11 Python
举例讲解Python装饰器
2020/12/24 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
Python面试题集
2012/03/08 面试题
若干个Java基础面试题
2015/05/19 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
高三霸气励志标语
2014/06/24 职场文书
联片教研活动总结
2014/07/01 职场文书
大学生自荐材料范文
2014/12/30 职场文书
2015年爱牙日活动总结
2015/02/05 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
四风之害观后感
2015/06/09 职场文书
忘记Grafana不要紧2种Grafana重置admin密码方法详细步骤
2022/04/07 Servers
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技