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 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
js 鼠标点击事件及其它捕获
Jun 04 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
原生JS轮播图插件
Feb 09 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
javascript实现评分功能
Jun 24 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
js两行代码按指定格式输出日期时间
2011/10/21 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
JS作用域深度解析
2016/12/29 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Django视图类型总结
2021/02/17 Python
python FTP编程基础入门
2021/02/27 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
小区门卫值班制度
2014/01/24 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
继承公证书格式
2015/01/26 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
MySQL新手入门进阶语句汇总
2022/09/23 MySQL