基于vue.js 2.0表单验证vuelidate插件介绍及使用

官网：https://vuelidate.netlify.com/
Github：https://github.com/monterail/...

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

1、简单介绍

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

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

一、$v values 属性和值

刷新页面，在浏览器上能够看到以下结果

$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-格式正确（包括空值）

二、$v methods 方法

$touch -- 触发验证，把指定的验证器及其全部子项的$dirty置为true
$reset -- 重置验证，把指定的验证器及其全部子项的$dirty置为false
这些方法能够在html中使用@input或@blur绑定，也能够在js中触发执行

三、validations 验证配置项

注意：全部的验证器须要与data下面的数据有对应值

四、Builtin validators 内置的验证规则

官方自带的验证规则：required, between, maxLength, minLength, minValue, maxValue, alpha, alphaNum, numeric, email, ipAddress, macAddress, sameAs, url…
为了方便vue每一个子组件的使用，在main.js作了统一引入，并挂载在vue原型的$rules上，能够看以前的main.js代码截图。

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

一、需求：

（1）给输入框提供验证规则，必填、邮箱地址、手机号、字母数字下划线等等；
（2）当不知足其中一条规则时，给出提示，不能作后续操做（例如向后端发请求）；
（3）提示方式：若是验证不经过，当输入框失焦，输入框标红，鼠标悬浮、聚焦出现提示语；
（4）当输入框有多条验证规则时，只显示第一条触发规则的提示语；
（5）第一次输入，当输入框的验证规则包含有“输入内容限制”的规则时，好比只能输入数字，须要即时提示（输入过程就要提示），主动删除内容后，提示消失。输入框失焦后，只要触发规则，提示语会一直跟随。

二、封装思路

（1）须要提供的属性有：error—一个标识，用于判断是否标红输入框，是否显示错误提示语。msgList—一个json数组，当有多少条验证规则时就有多少项；每一项包括，show：是否显示错误提示的标识，text：错误提示语。
（2）父组件调用时，可以自定义须要验证的内容，能够是输入框、选择框等等。（利用slot）
（3）错误提示语能够根据输入框（选择框）的高度，自动跟随提示在下方。

tip-msg.vue组件

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

三、基本使用方法

由于在不少模块都会使用表单验证，因此在main.js全局引入并注册

test-page.vue

四、自定义验证规则

除了官方自带的验证规则，咱们还能够根据实际业务需求自定义验证规则。
vuelidate-rule.js

带参数的自定义规则：

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

main.js

test-page.vue

五、Config keywords 配置关键字（介绍$each的用法）

六、$each 配合 $iter 用法

这里须要注意的一点，使用了$iter以后，index变成了string，若是要变回number可使index-0

七、requiredIf用法

官方说明：requiredIf-仅当提供的属性或谓词为true时才须要非空数据。
仍是直接上例子更直白：

直接点击提交，验证经过

输入ip以后点击提交，验证不经过

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