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无法执行的解决办法
Feb 25 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue router demo详解
Oct 13 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
JavaScript回调函数callback用法解析
Jan 14 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
德生PL330测评
2021/03/02 无线电
PHP生成静态页面详解
2006/11/19 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python内建数据结构详解
2016/02/03 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
Python完成毫秒级抢淘宝大单功能
2019/06/06 Python
Python绘制频率分布直方图的示例
2019/07/08 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
python实现xml转json文件的示例代码
2020/12/30 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
如何用canvas实现在线签名的示例代码
2018/07/10 HTML / CSS
艺术设计专业个人求职信
2013/09/21 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
人事部专员岗位职责
2014/03/04 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
政风行风评议个人心得体会
2014/10/29 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
Python自动化实战之接口请求的实现
2022/05/30 Python