好用的表单验证工具 vuelidate

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Vue validation(表单验证)--vuelidate

表单是用户那里收集的数据的工具。如果它没有收集到你需要的数据，或者收集到的数据不对，那么你的表单就没有达到它的目的。这就是为什么我们需要表单验证。

1.需要验证的问题

必要的信息不能让用户提交空信息
虽然不能保证用户提交的信息100%正确，但至少提交信息的格式要保证正确
通过表单验证控制一些元素的行为，比如信息不正确，提交按钮的响应

2.Vuelidate

虽然可以从头开始编写所有表单验证，但已经有一些高质量的库可以帮助解决这个问题。这里我们要介绍的library是Vuelidate，Vuelidate是一个流行的轻量级验证库，由PawełGrabarz和Damian Dulisz创建，Damian Dulisz是Vue核心团队的成员。它也相当灵活，可以随着您的应用程序规模扩大，并且其验证需求也在增长。

首先我们来安装(Vuelidate)

1$ npm install vuelidate -S

安装好了Vuelidate，我们需要在main.js中引入它

1import 'Vuelidate' from 'Vuelidate'
2Vue.use(Vuelidate)

现在我们可以在我们的spa中全局使用Vuelidate。

1// demo.vue
2<template>
3    <div>
4        <input type="email" v-model="email"/>
5        <button type="submit">提交</button>
6    </div>
7</template>
8
9<script>
10    import { required, email } from 'vuelidate/lib/validators'
11    export default {
12        data() {
13            return {
14                email: null
15            }
16        },
17        validations: {
18            email: {
19                required,
20                email
21            }
22        }
23    }
24</script>

demo中，我们将向组件添加一个validations选项。这个选项不是Vuelidate提供给我们的；它只是我们添加的一个选项,Vuelidate可以利用它。

在validations选项中，我们为data中的react数据email添加一个对象，它被template中的input元素绑定。

其次我们将从Vuelidate导入类似'required'，'email'这样的规则。这些规则是内置的Vuelidate验证器。详见以下列表：

规则	参数	描述
required	Boolean	需要非空数据。检查空数组和仅包含空格的字符串。
minLength	最小长度	要求输入具有最小指定长度（包括首尾）。与数组一起使用。
maxLength	最长长度	要求输入具有最大的指定长度（包括该长度）。与数组一起使用。
between	最小，最大	检查数字或日期是否在指定范围内。最小值和最大值都包括在内。
alpha	Boolean	仅接受字母字符。
alphaNum	Boolean	仅接受字母数字。
numeric	Boolean	仅接受数字。
integer	Boolean	接受正负整数。
decimal	Boolean	接受正负十进制数。
email	Boolean	接受有效的电子邮件地址。请记住，您仍然必须在服务器上仔细验证它，因为如果不发送验证电子邮件就无法确定该地址是否真实。
ipAddress	Boolean	接受点分十进制表示法的有效IPv4地址，例如127.0.0.1。
minValue	分	要求输入具有指定的最小数值或日期。
maxValue	最大值	要求输入具有指定的最大数值或日期。
macAddress	分隔符=':'	接受有效的MAC地址，例如00:ff:11:22:33:44:55。不要忘记调用它macAddress()，因为它具有可选参数。您可以指定自己的分隔符，而不是':'。
url	Boolean	接受有效的url地址。
or	\|\|	或
and	&&	与
not	!	非
withParams	$params	不是真正的验证器，而是验证器修饰符。将$params对象添加到提供的验证器中。可以用于验证功能，甚至可以用于整个嵌套字段验证对象。对于创建自己的自定义验证器很有用。
requiredIf	定位器*	仅在提供的属性为true时才进行验证。
requiredUnless	定位器*	仅在提供的属性为false时才进行验证。
sameAs	定位器*	检查给定属性是否相等。

完成这些步骤后，Vuelidate会自动为组件添加了一个名为$v的计算属性。它包含了整个表单验证的当前状态。我们也可以单独读取email对象，它包含了email验证的状态。

在组件中我们可以直接使用this.$v获取到整个对象，并通过其中的状态做出我们所需要的逻。例如：

1$v.email.$invalid = true(说明email这项表单没有通过验证)
2$v.email.required = false(说明email为空)
3$v.email.required = false && $v.email.email = false
4(说明email格式错误)

当表单出现问题时，我们可以有效地向用户显示错误。但是进入页面就自动显示错误消息并不是很好的用户体验。Vuelidate提供了许多方法与属性可供使用，更多好用的属性可以自行去查文档，例如：

1$v.email.$dirty// 用户是否有触发过表单
2$v.email.$error// 用户真实错误$dirty + $invalid
3$v.email.$touch()// 用来改变$dirty值

$v中同时包含了表单的全局属性，与单个表单验证属性类似，可用于编写表单提交逻辑，即：

1$v.$dirty
2$v.$error
3$v.$anyDirty
4$v.$anyError
5$v.$invalid

$v.$invalid将在任何与我们的验证相关的错误发生时为真。您可以在提交表单之前检查$v.$invalid状态，从而轻松完成验证表单操作。注意：在那之前我们调用$v.$touch()，这将更改所有表单验证的$v.$dirty状态，导致所有$invalid字段的$error为true。