博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于vue.js 2.0表单验证vuelidate插件介绍及使用
阅读量:6006 次
发布时间:2019-06-20

本文共 1949 字,大约阅读时间需要 6 分钟。

官网:

Github:

具体的安装方法和项目引入使用就不说了,官网说的很清楚。下面直接上例子

一、简单介绍

先简单看下main.js 做了什么

clipboard.png
clipboard.png
clipboard.png

测试用的页面:test-page.vue

clipboard.png
clipboard.png

1、$v values 属性和值

刷新页面,在浏览器上可以看到如下结果

clipboard.png

$v 常用的属性和值:

required -- 需要非空数据,false-输入框现为空值,true-输入框现为非空值
$model -- this.$v.name.$model相当于this.name,相当于v-model的值
$invalid -- 验证状态,true-验证不通过,false-验证通过
$dirty -- 表示用户是否至少触摸了一次验证字段。用$touch和$reset管理此标识
$error – 用于判断是否应显示错误消息。true-显示,false-不显示
$error === this.$dirty && !this.$pending && this.$invalid
$pending -- 始终为false:所有验证器都是同步的
email – 邮箱格式验证,false-格式错误,true-格式正确(包括空值)

2、$v methods 方法

clipboard.png

clipboard.png

$touch -- 触发验证,把指定的验证器及其所有子项的$dirty置为true

$reset -- 重置验证,把指定的验证器及其所有子项的$dirty置为false
这些方法可以在html中使用@input或@blur绑定,也可以在js中触发执行

3、validations 验证配置项

clipboard.png

注意:所有的验证器需要与data下面的数据有对应值

4、Builtin validators 内置的验证规则

官方自带的验证规则:required, between, maxLength, minLength, minValue, maxValue, alpha, alphaNum, numeric, email, ipAddress, macAddress, sameAs, url…

为了方便vue每个子组件的使用,在main.js做了统一引入,并挂载在vue原型的$rules上,可以看之前的main.js代码截图。

二、基于vuelidate的vue组件封装及使用

1、需求:

(1)给输入框提供验证规则,必填、邮箱地址、手机号、字母数字下划线等等;

(2)当不满足其中一条规则时,给出提示,不能做后续操作(例如向后端发请求);
(3)提示方式:如果验证不通过,当输入框失焦,输入框标红,鼠标悬浮、聚焦出现提示语;
(4)当输入框有多条验证规则时,只显示第一条触发规则的提示语;
(5)第一次输入,当输入框的验证规则包含有“输入内容限制”的规则时,比如只能输入数字,需要即时提示(输入过程就要提示),主动删除内容后,提示消失。输入框失焦后,只要触发规则,提示语会一直跟随。

clipboard.png

2、封装思路

(1)需要提供的属性有:error—一个标识,用于判断是否标红输入框,是否显示错误提示语。msgList—一个json数组,当有多少条验证规则时就有多少项;每一项包括,show:是否显示错误提示的标识,text:错误提示语。

(2)父组件调用时,能够自定义需要验证的内容,可以是输入框、选择框等等。(利用slot)
(3)错误提示语可以根据输入框(选择框)的高度,自动跟随提示在下方。

tip-msg.vue组件

clipboard.png
clipboard.png

关键的技术点已经用红框标出。

3、基本使用方法

因为在很多模块都会使用表单验证,所以在main.js全局引入并注册

clipboard.png
clipboard.png

test-page.vue

clipboard.png
clipboard.png
clipboard.png
clipboard.png

4、自定义验证规则

除了官方自带的验证规则,我们还可以根据实际业务需求自定义验证规则。

vuelidate-rule.js
clipboard.png
clipboard.png

带参数的自定义规则:

clipboard.png

注意,当验证的字段是非必填时,即没有required时,要加上 !helpers.req(value) 这个req帮助器。可以参考GitHub上的官网源码:

clipboard.png

main.js

clipboard.png
clipboard.png

test-page.vue

clipboard.png
clipboard.png
clipboard.png

5、Config keywords 配置关键字(介绍$each的用法)

clipboard.png

clipboard.png
clipboard.png
clipboard.png

6、$each 配合 $iter 用法

clipboard.png

这里需要注意的一点,使用了$iter之后,index变成了string,如果要变回number可以使index-0

clipboard.png

7、requiredIf用法

官方说明:requiredIf-仅当提供的属性或谓词为true时才需要非空数据。

还是直接上例子更直白:
clipboard.png

直接点击提交,验证通过

clipboard.png

输入ip之后点击提交,验证不通过

clipboard.png

以上,就是使用vuelidate插件做表单验证开发中常用到的功能,还有更多强大的功能等着各位去发现,加油吧少年!文中如有不正确的地方欢迎指出~

转载地址:http://knpmx.baihongyu.com/

你可能感兴趣的文章
解决OracleDBConsoleorcl不能启动
查看>>
.net DLL程序集中打包另一个DLL
查看>>
我的友情链接
查看>>
Drupal第三方模块汇集(一)
查看>>
我的友情链接
查看>>
使用spring的自身的listener进行web的配置
查看>>
linux学习之“VI”与“VIM”
查看>>
linux下无线网卡驱动安装
查看>>
oracle recyclebin与flashback drop
查看>>
我的友情链接
查看>>
svmlight使用说明
查看>>
LVM
查看>>
学习之shell脚本
查看>>
Andorid Launcher程序代码分析
查看>>
Swing 和AWT之间的关系
查看>>
Mysql设置自增长主键的初始值
查看>>
Android计时器正确应用方式解析
查看>>
性能及监控
查看>>
linux系统CPU、内存、硬盘、网络、lnmp服务整体监控邮件报警
查看>>
我的友情链接
查看>>