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 相关文章推荐
JS 类型转换常见方法小结
May 31 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
基于jquery的cookie的用法
Jan 10 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
关于vue-resource报错450的解决方案
Jul 24 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
PHP 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
Node.js中你不可不精的Stream(流)
2018/06/08 Javascript
JavaScript常用数组操作方法,包含ES6方法
2020/05/10 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python生成8位随机字符串的方法分析
2017/12/05 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
直接有效的自我评价
2014/01/11 职场文书
小学生成长感言
2014/01/30 职场文书
共产党员承诺书
2014/03/25 职场文书
2014年教育工作总结
2014/11/26 职场文书
城管年度个人总结
2015/02/28 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python