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 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
js变换显示图片的实例
Apr 16 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
Vue中的v-for循环key属性注意事项小结
Aug 12 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
js实现打字小游戏
Dec 17 Javascript
JS中作用域以及变量范围分析
Jul 18 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 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
MYSQL环境变量设置方法
2007/01/15 PHP
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
php中神奇的fastcgi_finish_request
2011/05/02 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JS实现不使用图片仿Windows右键菜单效果代码
2015/10/22 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python通过http下载文件的方法详解
2019/07/26 Python
Python新手学习raise用法
2020/06/03 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
如何利用find命令查找文件
2016/11/18 面试题
优秀求职信范文分享
2014/01/26 职场文书
捐款倡议书
2014/04/14 职场文书
关于运动会的口号
2014/06/07 职场文书
青年志愿者活动方案
2014/08/17 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
老干部座谈会主持词
2015/07/03 职场文书