Vue中使用vee-validate表单验证的方法
作者:紫裳 发布时间:2024-06-05 15:29:04
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插件功能会在往后更新完善,希望对大家有帮助。
总结
以上所述是小编给大家介绍的Vue中使用vee-validate表单验证的方法网站的支持!
来源:https://www.cnblogs.com/zishang91/p/7609460.html
猜你喜欢
- 1、简介FastAPI 是一个用于构建 API 的现代、快速(高性能)的 web 框架,使用 Python 3.6+ 并基于标准的 Pyth
- 双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个name属性,
- Python安装流程:一.下载在网上(输入网址https://www.python.org/downloads/)下载Windows最新的p
- 情感短文本分类TextRNN是一种循环神经网络(RNN)结构,特别适用于处理序列数据。它通过将上一个时刻的隐状态与当前时刻的输入进行结合,来
- 对于一个给定的字符串,逆序输出,这个任务对于python来说是一种很简单的操作,毕竟强大的列表和字符串处理的一些列函数足以应付这些问题 了,
- 前言这篇博文的目的是演示如何使用 OpenCV、Python 和面部标志对齐人脸。给定一组面部标志(输入坐标),我们的目标是将图像扭曲并转换
- 初学ASP,程序是能勉强写出来了,但若每进行一次网站页面的改版,所有的源程序都将进行一次移植手术。为此所耗费的人力精力不计其数,甚至一不小心
- 从最简单的Web浏览器的登录界面开始,登录界面如下:进行Web页面自动化测试,对页面上的元素进行定位和操作是核心。而操作又是以定位为前提的,
- 代码中经常会有变量是否为None的判断,有三种主要的写法:第一种是`if x is None`;第二种是 `if not x:`;第三种是`
- 前言最近参加了datawhale的组队学习活动,在组队学习动员下,开始通过强迫自己输出来实现更好的输入与处理,6-15开始自己的第一次文章发
- toString()方法的定义和用法:toString()方法可以把Number对象转换成字符串,并返回此字符串。点击可查看更多
- Go 语言的 sync 包提供了一系列同步原语,其中 sync.Cond 就是其中之一。sync.Cond 的作用是在多个 goroutin
- python中有的df列比较长head的时候会出现省略号,现在数据分析常用的就是基于anaconda的notebook和sypder,在sp
- declare @Table_name varchar(60) set @Table_name = 'Pay_inputpay
- 前言1.工作中,经常需要合并多个Excel文件。如果文件数量比较多,则工作量大,易出错,此时,可以使用Python来快速的完成合并。2.使用
- babel-plugin-import 实现自动按需引入Vant 支持一次性导入所有组件,引入所有组件会增加代码包体积,因此不推荐这种做法b
- 文章摘要本文简单说明了FLV文件的格式,以此为出发点,使用 Python 实现FLV视频的拼接。一.FLV文件格式关于FLV文件格式的解析网
- 准确地讲,Python没有专门处理字节的数据类型。但由于str既是字符串,又可以表示字节,所以,字节数组=str。而在C语言中,我们可以很方
- part 1最近在学习go自带的rpc,看完了一遍想着自己实现一个codec,也就是自定义消息的序列化和反序列化。消息的序列化和反序列化涉及
- 这篇文章主要介绍了通过python连接Linux命令行代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,