好用的表单验证工具 vuelidate

Vue validation(表单验证)--vuelidate

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

1.需要验证的问题

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

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验证器。详见以下列表：

完成这些步骤后，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。