Vee-validate学习
Vee-validate使用方法
首先引入
<script src="https://cdn.bootcss.com/vee-validate/2.0.9/vee-validate.js"></script>
<script src="https://cdn.bootcss.com/vee-validate/2.0.9/locale/zh_CN.js"></script>
然后在VUE中使用
Vue.use(VeeValidate);
简单例子:
<div>
<label for="email">邮箱:</label>
<input v-validate ="'required|email'" type="text" name="myEmail">
</div>
<span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>
v-validate后面的required和email是官方提供的几种默认错误类型中的两个.
span中用到了errors的几个方法,这里的参数都是定义了验证规则的表单的name.列举几个errors的方法:
- first('field')
field中的第一个错误 - collect('field')
field中所有的错误 - has('field')
field中是否有错误 - all()
当前表单中的所有错误 - any()
当前表单中是否有错误 - count()
当前表单中的错误数量 - clear()
清除当前表单中的所有错误
使用中文提示
var Validator = VeeValidate.Validator;
Vue.use(VeeValidate, {
locale: 'zh_CN'
});
Validator.locale = "zh_CN";
Validator.localize(Validator.locale, {
messages: window.__vee_validate_locale__zh_CN.js.messages
})
修改默认的错误提示信息
Validator.dictionary.container.zh_CN.messages.email = function(name){
return name + "这个邮箱格式不正确哦!";
}
内置的校验规则
- 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的数字
- dimentsions: {width},{height}符合宽度规定的图片
- email 邮箱验证
- ext:[extensions] 后缀名
- image 图片
- in:[list] 包含在数组list内的值
- ip Ipv4地址
- max:{length} 最大长度为length的字符
- mimes:[list] 文件类型
- min: max相反
- mot_in: in相反
- numeric 只允许数字
- regex:{pattern} 值必须符合正则
- required: 必须
- size:{kb} 文件大小不超过
- url:{domain} 指定域名的url
自定义规则
Validator.extend("hello", {
messages:{
zh_CN:field => field + "必须是11位",
},
validate: value => {
console.log("ssdfds");
return value == "123";
}
});
Validator.dictionary.container.zh_CN.messages.hello = function(name){
return name + "这个不对!";
}
Vee-validate学习的更多相关文章
- jquery validate学习心得
据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...
- jquery 插件 validate 学习
jquery是十分方便的对于现在来说. 首先应该明白一个问题: <p> <label for="password">Password</label& ...
- JQuery.Validate学习笔记
JQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- Vular开发手记#1:设计并实现一个拼插式应用程序框架
可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
- async-validator 源码学习笔记(六):validate 方法
系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...
- 【Java EE 学习 33 下】【validate表单验证插件】
一.validate 1.官方网站:http://jqueryvalidation.org/ 2.文档说明:http://jqueryvalidation.org/documentation/ 3.j ...
- validate插件深入学习-03validate()方法配置项
validate()方法配置项 rules 定义校验规则 messages 定义提示信息 上面这两个已经介绍过了 rules里隐藏的属性depends,只有符合条件(返回true)的时候才会执行 su ...
- validate插件深入学习-02 常用方法和validate对象的方法
①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...
- validate插件深入学习-01 小白从看透一个插件开始
没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...
随机推荐
- Oracle Dataguard 基本原理
转载-http://blog.sina.com.cn/s/blog_7c5a82970101prcx.html 1.DATAGUARD原理 DATAGUARD是通过建立一个PRIMARY和STANDB ...
- 我的HTML总结之表单
表单是Web中实现交互的重要方法,用于收集用户信息并提交给服务器. 表单中的9大控件 <input type="text" name="key" va ...
- 如何查找Fiori UI上某个字段对应的后台存储表的名称
今天微信群里有朋友问到这个问题. 如果是SAPGUI里的事务码,比如MM01,对于开发者来说这个任务非常容易完成. 比如我想知道下图"Sales Unit"这个字段的值到底保存在哪 ...
- DOS下启动MySQL时输入net start mysql 提示服务名无效的问题
原因:mysql服务名错误. 正确做法:net start +mysql服务名
- Vim中 ctags 跳转直接跳到第一个匹配行的问题
意图 用ctags搜索代码时, 用 ctrl + ] 后,只有一个匹配项直接跳转,有多个则列出所有匹配项选择跳转 问题 在 vim 中使用 ctags 是一个很令人舒服的事情,但有时一些默认的配置和不 ...
- ExtJS4 ajax请求同步异步问题
今天在写代码过程中遇到一个奇怪的问题.事情是这种,我写了一个简单的页面用来删除选中的用户,请看以下: 由于后台的servlet的代码实现了依据用户名来删除一条记录.所以我在前台的ExtJS代码里面用了 ...
- GPU CUDA编程中threadIdx, blockIdx, blockDim, gridDim之间的区别与联系
前期写代码的时候都会困惑这个实际的threadIdx(tid,实际的线程id)到底是多少,自己写出来的对不对,今天经过自己一些小例子的推敲,以及找到官网的相关介绍,总算自己弄清楚了. 在启动kerne ...
- 了解Mysql与MariaDb的关系
MariaDB是MySQL源代码的一个分支,随着Oracle买下Sun,MySQL也落入了关系型数据库王者之手.在意识到Oracle会对MySQL许可做什么后便分离了出来(MySQL先后被Sun.Or ...
- 【题解】洛谷P1731 [NOI1999] 生日蛋糕(搜索+剪枝)
洛谷P1731:https://www.luogu.org/problemnew/show/P1731 思路 三重剪枝 当前表面积+下一层表面积如果超过最优值就退出 当前体积+下一层体积如果超过总体积 ...
- 外部的 JavaScript
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...