Vee-Validate的使用方法详解


Posted in Javascript onSeptember 22, 2017

引入:

npm install vee-validate --save

vue代码:

import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包,提示信息可以以中文形式显示
import { Validator } from 'vee-validate';

Validator.addLocale(zh_CN); // 设置提示信息中文方式显示

const config = {
 errorBagName: 'errors', 
 fieldsBagName: 'fields',
 delay: 100,  
 locale: 'zh_CN', 
 strict: true, 
 enableAutoClasses: true,
 events: 'blur', 
 inject: true
};

// 自定义提示信息
const dictionary = {
 zh_CN: {
  messages: {
   ip: () => 'ip格式不正确? >.<'
  }
 }
};
Validator.updateDictionary(dictionary);

// 自定义规则
Validator.extend('qq', {
 messages: {
  zh_CN:field => 'qq号码输入不正确'
 },
 validate: value => {
  return /^[1-9][0-9]{4,14}$/.test(value);
 }
});
Vue.use(VeeValidate, config); //一般插件都要use一下

使用

<label><span>ip:</span><input v-validate="'required|email'" name="email" type="text" v-model="ip"/></label>
<span v-show="errors.first('ip')">{{ errors.first('ip') }}</span>

注意 : name一定要写,否则不会进行验证

config配置信息

插件的一些功能可以自定义,需要编写config,然后Vue.use(VeeValidate, config)来使用
一下为配置信息的意思(可能不全面)

errorBagName: 'erroers'

所有的错误信息都是放在这个里面的,如果名称和页面上的变量名字冲突,需要修改成其他的,当是errors.fist的时候,error就是字符串,当使用error.all()/error.collect()的时候就是数组

fieldsBagName: 'fields'

字段的名称(标志)的对象,将在每个Vue的实例数据注入。如果在页面上使用了ip的验证,那么,可以通过如下获取一个对象:

this.fileds.ip
 >> 获取到的对象:
{
  dirty :true
  invalid:false
  pending:false
  pristine:false
  required:true
  touched:true
  untouched:false
  valid:true
  validated:true
}

delay : 100 表示获取输入信息的时间

locale: ‘zh_CN' 验证消息的默认语言。

strict: true 表示没有设置规则的表单不进行验证

classes (不懂)

events: 'blur|input' 默认是input|blur 就是在用户输入和表单失去焦点的时候都进行验证,blue表示失去焦点的时候进行验证

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

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
深入理解MVC中的时间js格式化
May 19 Javascript
JavaScript实现星级评分
Jan 12 Javascript
Vue-router 类似Vuex实现组件化开发的示例
Sep 15 Javascript
微信小程序实现简单表格
Feb 14 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
Node.js自定义实现文件路由功能
Sep 22 #Javascript
详解bootstrap用dropdown-menu实现上下文菜单
Sep 22 #Javascript
javascript计算渐变颜色的实例
Sep 22 #Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 #Javascript
原生JS实现日历组件的示例代码
Sep 22 #Javascript
BootstrapTable加载按钮功能实例代码详解
Sep 22 #Javascript
You might like
PHP使用SOAP扩展实现WebService的方法
2016/04/01 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue 实现click同时传入事件对象和自定义参数
2021/01/29 Vue.js
[01:48]2018DOTA2亚洲邀请赛主赛事第二日五佳镜头 VG完美团战逆转TNC
2018/04/05 DOTA
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
python爬虫入门教程--快速理解HTTP协议(一)
2017/05/25 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
Python常见数据类型转换操作示例
2019/05/08 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python tornado上传文件的功能
2020/03/26 Python
医院护士专业个人的求职信
2013/12/09 职场文书
会计系中文个人求职信
2013/12/24 职场文书
高三励志标语
2014/06/05 职场文书
个性车贴标语
2014/06/24 职场文书
教师求职自荐信
2015/03/26 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis