Vue如何使用vee-validate表单验证

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,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!

时间: 2024-10-11 08:14:02

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

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

前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验证规则来验证输入的 HTTP 请求.要掌握 Laravel 强大的验证特性,让我们先看一个完整的验证表单并返回错误信息给用户的例子. 在这之前如果您是首次接触 Laravel 而且并不知道路由如何跳转到指定的控制器 可以查看博主的Restfulapi或者Laravel官网对路由的介绍,在这里就不做介

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

1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http://www.cnblogs.com/jingmin/p/6592325.html 2.在使用summernote编辑完文本,使用validate进行表单验证出现问题的解决方案 小编在使用summernote富文本编辑器编辑完文章内容,并且上传了图片,对于编写的内容使用了validate进行了表单验

基于jQuery的Validate表单验证

表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~  而我工作中用到最多的就是基于基于jQuery的Validate表单验证~  就向下面这样~ 因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~  基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~ 既然Validate是基于jQ

jquery validate 表单验证插件

对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百

jQuery Validate 表单验证插件----自定义校验结果样式

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

jQuery Validate 表单验证插件----自定义一个验证方法

一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"

validate表单验证插件

1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 //表单验证 $("#formSubmit").validate({ debug:true, //调试模式,取消submit默认的提交功能 rules:{ name:{ required:true, checkEmpty:true }, email:{ required:true, emai

jquery validate表单验证插件-推荐

1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的

jquery.validate 表单验证

这个是我星期六的时候研究了一天的成果,虽然效率有点低吧,自学能力有点弱,不过自己还是很满意了吧,现在能自己套到程序中并成功运行,达到自己想要的效果 首先引用 Jquery Jquery.Vaildate 自定义方法,正则验证 jQuery.validator.addMethod("isPhone", function(value, element) { var length = value.length; var mobile = /^[1][345789]\d{9}$/; retur

Vue+Element-UI 多个form表单验证

在开发的过程中   有时根据业务需求提交的表单内容分区分块  内容繁多 业务控制相对复杂的时候  我们应该将页面内容分成若干个组件  这样方便后期维护查找问题  不然时间长了后期维护找问题头都大了 如上图所示  页面表单分为基本设置,上架设置,更多设置3大块  分别将3大块写到3个组件(A,B,C) 提交表单的时候我们要进行表单验证 思路:利用ES6 Promise异步控制 代码如下 组件A <el-form :model="ruleForm" :rules="rule