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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jQuery实现给页面换肤的方法
May 30 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
javascript中活灵活现的Array对象详解
Nov 30 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
原生JS实现拖拽效果
Dec 04 Javascript
vue-resource 拦截器interceptors使用详解
Jan 18 Vue.js
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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
浅析Python 多行匹配模式
2020/07/24 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
掌上明珠Java程序员面试总结
2016/02/23 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
医药大学生求职简历的自我评价
2013/10/17 职场文书
市场营销职业生涯规划书范文
2014/01/12 职场文书
运动会解说词100字
2014/01/31 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
2014年度个人工作总结范文
2015/03/09 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
浅谈mysql增加索引不生效的几种情况
2021/06/23 MySQL
Redis数据同步之redis shake的实现方法
2022/04/21 Redis