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中引入:
 

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

        注意:(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的错误提示如下图所示,这肯定不是我们想要的,我们需要定义一下。
 

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

        效果如下:
 

        其中field获取的是attributes中的email的value值,也就是'邮箱'。vee-validate提供了一些规则,具体可以去vee-validate官网查看。
        5.接下来是重点:自定义规则。以下是自定义身份证号验证的demo:
 
 

        效果如下:
 

        如果需求里不需要多一个提示的标签,只需要在错误验证时显示警示颜色,那可以通过在input标签上写 :class="{error:error.has('idCard')}" 来实现。至此已经可以满足基本的验证需求了,更多的vee-validate插件功能会在往后更新完善,希望对大家有帮助。
 
 
        
        如需转载请注明出处:http://www.cnblogs.com/zishang91/p/7609460.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!
 
 
 
 
 
 

Vue如何使用vee-validate表单验证的更多相关文章

  1. 基于jQuery的Validate表单验证

    表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. 【干货】Laravel --Validate (表单验证) 使用实例

    前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...

  4. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  5. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  6. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  7. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  8. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...

  9. validate表单验证-单独验证

    今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...

  10. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

随机推荐

  1. iOS 集成React Native到现有iOS应用(Ficow本人实测,Xcode 8.3,iOS 10.3)

    详细操作步骤,请 参考官方文档  或者翻译文档 ! 我补充一些必要的注意事项: 1.引入React.a文件.配置User Header Search Paths 引入React.a文件(点击+可以看到 ...

  2. Robot Framework问题汇总...不断更新中

    在实际使用Robot Framework工具过程中,难免会遇到一些问题, 我们将会一一记录下来,以便后来者碰到类似的问题能够快速解决! 安装类问题: ========================= ...

  3. [CTSC2000]丘比特的烦恼

    Description 随着社会的不断发展,人与人之间的感情越来越功利化.最近,爱神丘比特发现,爱情也已不再是完全纯洁的了.这使得丘比特很是苦恼,他越来越难找到合适的男女,并向他们射去丘比特之箭.于是 ...

  4. Service官方教程(3)Bound Services

    Bound Services 1.In this document The Basics Creating a Bound Service Extending the Binder class Usi ...

  5. Vue自定义过滤器格式化数字三位加一逗号

    <template> <div class="index-compont"> <div class="totalCount"> ...

  6. 443 String Compression 压缩字符串

    给定一组字符,使用原地算法将其压缩.压缩后的长度必须始终小于或等于原数组长度.数组的每个元素应该是长度为1 的字符(不是 int 整数类型).在完成原地修改输入数组后,返回数组的新长度.进阶:你能否仅 ...

  7. 移动web开发基础(二)——viewport

    本文主要研究为什么移动web开发需要设置viewport,且一般设置为<meta name="viewport" content="width=device-wid ...

  8. Uediter的引用和取值

    页面应用Uediter控件,代码如下: <tr> <td align="center" class="xwnr_j"> <asp: ...

  9. 【工具】sublime使用技巧

    Ctrl+N 新建一个编辑区,Ctrl+Shift+C 或!加 Ctrl+E新建一个骨架完好的文件. Ctrl+Shift+P开启命令模式,sshtml 切换html语法. esc退出,Ctrl+`打 ...

  10. .NET 使用 Highcharts生成扇形图 柱形图

    1.首先新建一个.NET网站,如图所示: 2.引用所需要的js类库,如下图 highcharts.js可以在网上搜索就可以找到下载了. 3.在Default.aspx页面引用js 4.在 body 下 ...