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 相关文章推荐
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
详解JavaScript中Date.UTC()方法的使用
Jun 12 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
ES10 特性的完整指南小结
Mar 04 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
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
Php获取金书网的书名的实现代码
2010/06/11 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
javascript下string.format函数补充
2010/08/24 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
document.getElementById介绍
2011/09/13 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
Node.js+Express+MySql实现用户登录注册功能
2017/07/10 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
使用Python正则表达式操作文本数据的方法
2019/05/14 Python
解决django FileFIELD的编码问题
2020/03/30 Python
如何在pycharm中安装第三方包
2020/10/27 Python
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
导游词之香港-太平山顶
2019/10/18 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android