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的方法:

  1. first('field')

    field中的第一个错误
  2. collect('field')

    field中所有的错误
  3. has('field')

    field中是否有错误
  4. all()

    当前表单中的所有错误
  5. any()

    当前表单中是否有错误
  6. count()

    当前表单中的错误数量
  7. 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学习的更多相关文章

  1. jquery validate学习心得

    据说,javascript最初的由来就是为了解决表单的验证问题,当然现在的js已经能够用来做各种各样炫酷的效果,不过表单验证一直以来都是js很重要的一个用途(在博客园第一篇博客,不知道说些什么开头~~ ...

  2. jquery 插件 validate 学习

    jquery是十分方便的对于现在来说. 首先应该明白一个问题: <p> <label  for="password">Password</label& ...

  3. JQuery.Validate学习笔记

    JQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  4. Vular开发手记#1:设计并实现一个拼插式应用程序框架

    可视化编(rxeditor)辑告一段落,在知乎上发了一个问题,询问前景,虽然看好的不多,但是关注度还是有的,目前为止积累了21w流量,因为这个事,开心了好长一段时间.这一个月的时间,主要在设计制作Vu ...

  5. 2.12 学习总结 之 表单校验插件validate

    一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...

  6. async-validator 源码学习笔记(六):validate 方法

    系列文章: 1.async-validator 源码学习(一):文档翻译 2.async-validator 源码学习笔记(二):目录结构 3.async-validator 源码学习笔记(三):ru ...

  7. 【Java EE 学习 33 下】【validate表单验证插件】

    一.validate 1.官方网站:http://jqueryvalidation.org/ 2.文档说明:http://jqueryvalidation.org/documentation/ 3.j ...

  8. validate插件深入学习-03validate()方法配置项

    validate()方法配置项 rules 定义校验规则 messages 定义提示信息 上面这两个已经介绍过了 rules里隐藏的属性depends,只有符合条件(返回true)的时候才会执行 su ...

  9. validate插件深入学习-02 常用方法和validate对象的方法

    ①检查表单元素是否有效 valid() 在表单内添加<button id="check">检查</button> $('#check').click(fun ...

  10. validate插件深入学习-01 小白从看透一个插件开始

    没有编程基础的的我,即使看了一遍jq文档也不知道怎么写程序,一个新的插件看了也不知道怎么用. 总是想做自己会的,自己不会的永远不去触碰,就永远不会. 都说编程这东西,很多都有很像的地方了,一个语言学通 ...

随机推荐

  1. Oracle Dataguard 基本原理

    转载-http://blog.sina.com.cn/s/blog_7c5a82970101prcx.html 1.DATAGUARD原理 DATAGUARD是通过建立一个PRIMARY和STANDB ...

  2. 我的HTML总结之表单

    表单是Web中实现交互的重要方法,用于收集用户信息并提交给服务器.   表单中的9大控件 <input type="text" name="key" va ...

  3. 如何查找Fiori UI上某个字段对应的后台存储表的名称

    今天微信群里有朋友问到这个问题. 如果是SAPGUI里的事务码,比如MM01,对于开发者来说这个任务非常容易完成. 比如我想知道下图"Sales Unit"这个字段的值到底保存在哪 ...

  4. DOS下启动MySQL时输入net start mysql 提示服务名无效的问题

    原因:mysql服务名错误. 正确做法:net start  +mysql服务名

  5. Vim中 ctags 跳转直接跳到第一个匹配行的问题

    意图 用ctags搜索代码时, 用 ctrl + ] 后,只有一个匹配项直接跳转,有多个则列出所有匹配项选择跳转 问题 在 vim 中使用 ctags 是一个很令人舒服的事情,但有时一些默认的配置和不 ...

  6. ExtJS4 ajax请求同步异步问题

    今天在写代码过程中遇到一个奇怪的问题.事情是这种,我写了一个简单的页面用来删除选中的用户,请看以下: 由于后台的servlet的代码实现了依据用户名来删除一条记录.所以我在前台的ExtJS代码里面用了 ...

  7. GPU CUDA编程中threadIdx, blockIdx, blockDim, gridDim之间的区别与联系

    前期写代码的时候都会困惑这个实际的threadIdx(tid,实际的线程id)到底是多少,自己写出来的对不对,今天经过自己一些小例子的推敲,以及找到官网的相关介绍,总算自己弄清楚了. 在启动kerne ...

  8. 了解Mysql与MariaDb的关系

    MariaDB是MySQL源代码的一个分支,随着Oracle买下Sun,MySQL也落入了关系型数据库王者之手.在意识到Oracle会对MySQL许可做什么后便分离了出来(MySQL先后被Sun.Or ...

  9. 【题解】洛谷P1731 [NOI1999] 生日蛋糕(搜索+剪枝)

    洛谷P1731:https://www.luogu.org/problemnew/show/P1731 思路 三重剪枝 当前表面积+下一层表面积如果超过最优值就退出 当前体积+下一层体积如果超过总体积 ...

  10. 外部的 JavaScript

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...