Vue2.0表单校验组件vee-validate的使用详解


Posted in Javascript onMay 02, 2017

vee-validate使用教程

本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释。本人也是一边学习一边使用,如果错误之处敬请批评指出*

一、安装

npm install vee-validate@next --save

注意:@next,不然是Vue1.0版本

bower install vee-validate#2.0.0-beta.13 --save

二、引用

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

组件设置:

import VeeValidate, { Validator } from 'vee-validate';
import messages from 'assets/js/zh_CN';
Validator.updateDictionary({
  zh_CN: {
    messages
  }
});
const config = {
  errorBagName: 'errors', // change if property conflicts.
  delay: 0,
  locale: 'zh_CN',
  messages: null,
  strict: true
};
Vue.use(VeeValidate,config);

assets/js/zh_CN 代表你存放语言包的目录,从node_modules/vee-validate/dist/locale目录下面拷贝到你的项目

Validator还有更多应用,下面再讲。

config其它参数,delay代表输入多少ms之后进行校验,messages代表自定义校验信息,strict=true代表没有设置规则的表单不进行校验,errorBagName属于高级应用,自定义errors,待研究

三、基础使用

<div class="column is-12">
  <label class="label" for="email">Email</label>
  <p class="control">
    <input v-validate data-rules="required|email" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
    <span v-show="errors.has('email')" class="help is-danger">{{ errors.first('email') }}</span>
  </p>
</div>

提醒:错误信息里面的名称通常就是表单的name属性,除非是通过Vue实例传递进来的。

提醒:养成好习惯,给每个field添加name属性,如果没有name属性又没有对值进行绑定的话,validator可能不会对其进行正确的校验

关于errors:

上面的代码我们看到有errors.has,errors.first,errors是组件内置的一个数据模型,用来存储和处理错误信息,可以调用以下方法:

  1. errors.first('field') - 获取关于当前field的第一个错误信息
  2. collect('field') - 获取关于当前field的所有错误信息(list)
  3. has('field') - 当前filed是否有错误(true/false)
  4. all() - 当前表单所有错误(list)
  5. any() - 当前表单是否有任何错误(true/false)
  6. add(String field, String msg) - 添加错误
  7. clear() - 清除错误
  8. count() - 错误数量
  9. remove(String field) - 清除指定filed的所有错误

关于Validator

Validator是以$validator被组件自动注入到Vue实例的。同时也可以独立的进行调用,用来手动检查表单是否合法,以传入一个对象的方式,遍历其中指定的field。

import { Validator } from 'vee-validate';
const validator = new Validator({
  email: 'required|email',
  name: 'required|alpha|min:3',
}); 
// or Validator.create({ ... });

你也可以在构造了validator之后设置对象参数

import { Validator } from 'vee-validate';
const validator = new Validator();

validator.attach('email', 'required|email'); // attach field.
validator.attach('name', 'required|alpha', 'Full Name'); // attach field with display name for error generation.

validator.detach('email'); // you can also detach fields.

最后你也可以直接传值给field,测试是否可以通过校验,像这样:

validator.validate('email', 'foo@bar.com'); // true
validator.validate('email', 'foo@bar'); // false
//或者同时校验多个:
validator.validateAll({
  email: 'foo@bar.com',
  name: 'John Snow'
});
//只要有一个校验失败了,就返回false

四、内置的校验规则

  1. after{target} - 比target要大的一个合法日期,格式(DD/MM/YYYY)
  2. alpha - 只包含英文字符
  3. alpha_dash - 可以包含英文、数字、下划线、破折号
  4. alpha_num - 可以包含英文和数字
  5. before:{target} - 和after相反
  6. between:{min},{max} - 在min和max之间的数字
  7. confirmed:{target} - 必须和target一样
  8. date_between:{min,max} - 日期在min和max之间
  9. date_format:{format} - 合法的format格式化日期
  10. decimal:{decimals?} - 数字,而且是decimals进制
  11. digits:{length} - 长度为length的数字
  12. dimensions:{width},{height} - 符合宽高规定的图片
  13. email - 不解释
  14. ext:[extensions] - 后缀名
  15. image - 图片
  16. in:[list] - 包含在数组list内的值
  17. ip - ipv4地址
  18. max:{length} - 最大长度为length的字符
  19. mimes:[list] - 文件类型
  20. min - max相反
  21. mot_in - in相反
  22. numeric - 只允许数字
  23. regex:{pattern} - 值必须符合正则pattern
  24. required - 不解释
  25. size:{kb} - 文件大小不超过
  26. url:{domain?} - (指定域名的)url

五、自定义校验规则

1.直接定义

const validator = (value, args) => {
  // Return a Boolean or a Promise.
}
//最基本的形式,只返回布尔值或者Promise,带默认的错误提示

2.对象形式

const validator = {
  getMessage(field, args) { // 添加到默认的英文错误消息里面
    // Returns a message.
  },
  validate(value, args) {
    // Returns a Boolean or a Promise.
  }
};

3.添加到指定语言的错误消息

const validator = {
  messages: {
    en: (field, args) => {
      // 英文错误提示
    },
    cn: (field, args) => {
      // 中文错误提示
    }
  },
  validate(value, args) {
    // Returns a Boolean or a Promise.
  }
};

创建了规则之后,用extend方法添加到Validator里面

import { Validator } from 'vee-validate';
const isMobile = {
  messages: {
    en:(field, args) => field + '必须是11位手机号码',
  },
  validate: (value, args) => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
}
Validator.extend('mobile', isMobile);

//或者直接

Validator.extend('mobile', {
  messages: {
   en:field => field + '必须是11位手机号码',
  },
  validate: value => {
   return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

然后接可以直接把mobile当成内置规则使用了:

<input v-validate data-rules="required|mobile" :class="{'input': true, 'is-danger': errors.has('mobile') }" name="mobile" type="text" placeholder="Mobile">
<span v-show="errors.has('mobile')" class="help is-danger">{{ errors.first('mobile') }}</span>

4.自定义内置规则的错误信息

import { Validator } from 'vee-validate';

const dictionary = {
  en: {
    messages: {
      alpha: () => 'Some English Message'
    }
  },
  cn: {
    messages: {
      alpha: () => '对alpha规则的错误定义中文描述'
    }
  }
};

Validator.updateDictionary(dictionary);

暂时介绍到这里,应该已经上手了,有空再继续翻译。

其它问题或者更高级应用,请参考官方文档Vee-Validate

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
jquery实现手风琴效果实例代码
Nov 15 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
js实现网页收藏功能
Dec 17 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
ES6学习教程之对象的扩展详解
May 02 #Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 #Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 #Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 #Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 #Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
You might like
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript实现随时变化着的背景颜色
2015/04/02 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python 学习笔记
2008/12/27 Python
Python中的推导式使用详解
2015/06/03 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python之生产者消费者模型实现详解
2019/07/27 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
同事吵架检讨书
2014/02/05 职场文书
环保建议书600字
2014/05/14 职场文书
平安工地汇报材料
2014/08/19 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA
Mysql使用全文索引(FullText index)的实例代码
2022/04/03 MySQL
Golang 链表的学习和使用
2022/04/19 Golang
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers