Vue中使用vee-validate表单验证的方法


Posted in Javascript onMay 09, 2018

Vue项目遇到要表单验证了吧,对我来说表单验证是个很纠(dan)结(teng)的内容,各种判断凌乱到飞起。往常使用jquery的validate插件做表单验证方便吧,你也可以在Vue里引入jquery的validate插件(如何引入jquery在我上一篇博文有介绍,点击查看)。但是我们是做vue项目也,不到实在解决不了还是建议不要引入,因为Vue自己就有表单验证的插件,那就是vee-validate。

我在这并不是详细讲解vee-validate的使用功能,只是快速了解如何在项目里使用vee-validate,做项目时哪有那么多时间让你去熟悉一个插件,肯定先搞定了再说,具体熟悉掌握了解请自行查阅相关资料。

1.npm安装vee-validate:npm install vee-validate --save --registry=https://registry.npm.taobao.org --verbose

2.安装成功后在main.js中引入:

Vue中使用vee-validate表单验证的方法

3.在你要进行表单验证的input标签加入相关的代码:

Vue中使用vee-validate表单验证的方法

注意:

(1)errors打印出来是这样的:{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] },span标签通过errors的几个方法来进行显示隐藏和提示错误,这里列出几个常用的errors方法: errors.first('field'):当前field的第一个错误信息,字符串 errors.collect('field'):当前field的所有错误信息,数组列表 errors.has('field'):当前filed是否有错误,布尔值 errors.all():当前表单所有错误,数组列表 errors.any():当前表单是否有任何错误,布尔值

(2)v-validate="'required | email'"有两个验证,一个是为空验证,一个是输入错误验证,你想要多少种验证就在这里写。比如你要限制字数,那就加多个max,即v-validate="'required | email | max:9'"。

(3)name属性一定要写,span标签是展示错误提示的。其实此时已经基本完成表单验证了,只是出现的提示是插件提供的默认提示,比如email的错误提示如下图所示,这肯定不是我们想要的,我们需要定义一下。

Vue中使用vee-validate表单验证的方法
Vue中使用vee-validate表单验证的方法

4.定义成我们需要的文字提示:

Vue中使用vee-validate表单验证的方法

效果如下:

Vue中使用vee-validate表单验证的方法

Vue中使用vee-validate表单验证的方法

其中field获取的是attributes中的email的value值,也就是'邮箱'。vee-validate提供了一些规则,具体可以去vee-validate官网查看。

 5.接下来是重点:自定义规则。以下是自定义身份证号验证的demo:

Vue中使用vee-validate表单验证的方法Vue中使用vee-validate表单验证的方法

效果如下:

Vue中使用vee-validate表单验证的方法

Vue中使用vee-validate表单验证的方法

如果需求里不需要多一个提示的标签,只需要在错误验证时显示警示颜色,那可以通过在input标签上写:class="{error:error.has('idCard')}"来实现。至此已经可以满足基本的验证需求了,更多的vee-validate插件功能会在往后更新完善,希望对大家有帮助。

总结

以上所述是小编给大家介绍的Vue中使用vee-validate表单验证的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
Oct 16 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
JS严格模式知识点总结
Feb 27 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
3分钟读懂移动端rem使用方法(推荐)
May 06 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 #Javascript
vue实现2048小游戏功能思路详解
May 09 #Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 #Javascript
vue中的provide/inject的学习使用
May 09 #Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
You might like
PHP获取文件夹内文件数的方法
2015/03/12 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
php和asp语法上的区别总结
2019/05/12 PHP
javascript 自定义事件初探
2009/08/21 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
Vite和Vue CLI的优劣
2021/01/30 Vue.js
python读写ini文件示例(python读写文件)
2014/03/25 Python
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
Python中作用域的深入讲解
2018/12/10 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python实现简单五子棋游戏
2019/06/18 Python
Python的pygame安装教程详解
2020/02/10 Python
python 基于opencv实现图像增强
2020/12/23 Python
基于Python实现天天酷跑功能
2021/01/06 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
国家助学金获奖感言
2014/01/31 职场文书
学历公证书范本
2014/04/09 职场文书
人力资源部岗位职责
2015/02/11 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript