Vue2.0表单校验组件vee-validate的使用
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是组件内置的一个数据模型,用来存储和处理错误信息,可以调用以下方法:
errors.first('field')
- 获取关于当前field的第一个错误信息collect('field')
- 获取关于当前field的所有错误信息(list)has('field')
- 当前filed是否有错误(true/false)all()
- 当前表单所有错误(list)any()
- 当前表单是否有任何错误(true/false)add(String field, String msg)
- 添加错误clear()
- 清除错误count()
- 错误数量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
四、内置的校验规则
after{target}
- 比target要大的一个合法日期,格式(DD/MM/YYYY)alpha
- 只包含英文字符alpha_dash
- 可以包含英文、数字、下划线、破折号alpha_num
- 可以包含英文和数字before:{target}
- 和after相反between:{min},{max}
- 在min和max之间的数字confirmed:{target}
- 必须和target一样date_between:{min,max}
- 日期在min和max之间date_format:{format}
- 合法的format格式化日期decimal:{decimals?}
- 数字,而且是decimals进制digits:{length}
- 长度为length的数字dimensions:{width},{height}
- 符合宽高规定的图片email
- 不解释ext:[extensions]
- 后缀名image
- 图片in:[list]
- 包含在数组list内的值ip
- ipv4地址max:{length}
- 最大长度为length的字符mimes:[list]
- 文件类型min
- max相反mot_in
- in相反numeric
- 只允许数字regex:{pattern}
- 值必须符合正则patternrequired
- 不解释size:{kb}
- 文件大小不超过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
Vue2.0表单校验组件vee-validate的使用的更多相关文章
- 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件
表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...
- 简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...
- VeeValidate——vue2.0表单验证插件
一.vee-validate入门 vee-validate 是一个轻量级的 vue表单验证插件.它有很多开箱即用的验证规则,也支持自定义验证规则.它是基于模板的,因此它与HTML5验证API类似且熟悉 ...
- 表单校验组件ValidForm
10.1使用入门 1.引入css 请查看下载文件中的style.css,把里面Validform必须部分复制到你的css中 (文件里这个注释 "/*==========以下部分是Validf ...
- vue2.0表单事件的绑定
v-model 1.input type="text" <template> <div id="app"> <label for= ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- django基础之day09,创建一个forms表单组件进行表单校验,知识点:error_messages,label,required,invalid,局部钩子函数,全局钩子函数, forms_obj.cleaned_data,forms_obj.errors,locals(), {{ forms.label }}:{{ forms }},{{ forms.errors.0 }}
利用forms表单组件进行表单校验,完成用户名,密码,确认密码,邮箱功能的校验 该作业包含了下面的知识点: error_messages,label,required,invalid,局部钩子函数,全 ...
随机推荐
- RecyclerView 结合 CardView 使用(二)
上一篇的基础上,修改了,CardView的布局和点击效果 总结: CardView的奇葩属性 :app:cardPreventCornerOverlap="false" 和园角边框 ...
- 【转】Android之NetworkOnMainThreadException异常
看名字就应该知道,是网络请求在MainThread中产生的异常 先来看一下官网的解释: Class Overview The exception that is thrown when an appl ...
- Oracle 课程一之Oracle体系结构
课程目标 •理解ORACLE数据库体系架构—内存结构和进程 •理解SQL在数据库中的运作流程 •理解UNDO&REDO原理 •理解commit原理 1.Oracle数据库概述 •数据库:物 ...
- angular+rails集成实战
http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ 1. 添加gemgem 'sprockets ...
- 动态创建WebService
WebService应用主要是为远程提供接口服务,远程通过代理方式获取WebService资源:但是在现实应用过程中,在Web或者应用程序中如果想用生成远程代理,一般是借助vs里提供的 添加-添加we ...
- MFC ListControl用法
http://blog.csdn.net/lovton/article/details/6527208 1.建立一个对象m_LogList 步骤:在对话listcontrol控件右键点击添加变量-&g ...
- 【数据结构和算法】 O(1)时间取得栈中的最大 / 最小元素值
常数时间取得栈中的元素最大值和最小值,我们可以想到当push的时候比较一下,如果待push元素值小于栈顶元素,则更新min值,最大值亦然. 这样有个问题就是当pop的时候,就没了最大最小值. 于是上网 ...
- 纯css实现扁平化360卫士logo demo
前几天在w3ctech上看到有人用纯css写出了360卫士的logo,感觉蛮好玩的. 因为自己用css以来,还没有写过这种玩意,出于娱乐,我也来试着尝试一下. 开始也不知到怎么下手,最棘手的是那两个像 ...
- iOS学习网站及大牛网址(实时更新)
iOS学习网站及大牛网址(实时更新) 学习网站 https://github.com/Tim9Liu9/TimLiu-iOS 自己总结的iOS.mac开源项目及库 https://github.co ...
- 安装centos 7 体验安装过程
1. 下载centos7的iso文件,放入虚拟机的启动光盘中 2. 选择启动,然后可以看到安装的选项 3. 进行安装之后,会自动的进行一个检查 4. 选择安装的语言 5. 进入之后,可以看到所有需要安 ...