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中void(0)的具体含义解释
Aug 02 Javascript
简易js代码实现计算器操作
Apr 15 Javascript
JavaScript事件委托用法分析
Jan 24 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP实现GIF图片验证码
2015/11/04 PHP
深入php内核之php in array
2015/11/10 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
jQuery select控制插件
2009/08/17 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jQuery中trigger()方法用法实例
2015/01/19 Javascript
javascript实现密码强度显示
2015/03/18 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
2016/12/02 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
React和Vue中监听变量变化的方法
2018/11/14 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python自动格式化json文件的方法
2015/03/11 Python
Python利用ansible分发处理任务
2015/08/04 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
美容院营销方案
2014/03/05 职场文书
文化建设工作方案
2014/05/12 职场文书
幸福家庭标语
2014/06/27 职场文书
党员自我对照检查材料
2014/08/19 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
升职自荐信范文
2015/03/27 职场文书
董存瑞观后感
2015/06/11 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
python 网络编程要点总结
2021/06/18 Python