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中通过父级查找进行定位示例
Jun 28 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
Jul 09 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
js学习之----深入理解闭包
Nov 21 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 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动态生成虚拟现实VRML网页
2006/10/09 PHP
2014过年倒计时示例
2014/01/31 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
浅析AngularJs HTTP响应拦截器
2015/12/28 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
Vue+webpack项目基础配置教程
2018/02/12 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
后勤主管工作职责
2013/12/07 职场文书
区级文明单位申报材料
2014/05/15 职场文书
护士辞职信怎么写
2015/02/27 职场文书
财务部岗位职责范本
2015/04/14 职场文书
召开会议通知范文
2015/04/15 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书