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 相关文章推荐
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
微信小程序左滑删除效果的实现代码
Feb 20 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
node.js基础知识小结
Feb 26 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
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
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python中有趣在__call__函数
2015/06/21 Python
Python制作数据导入导出工具
2015/07/31 Python
Python实现字典依据value排序
2016/02/24 Python
Python单元测试简单示例
2018/07/03 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
基于python代码批量处理图片resize
2020/06/04 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
如何让Java程序执行效率更高
2014/06/25 面试题
幼儿园教师师德承诺书
2015/04/28 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Python必备技巧之字符数据操作详解
2022/03/23 Python