好用的表单验证工具 vuelidate

技术文章 1年前 (2020) 完美者
2,105 0

标签:成员   就是   size   tps   center   接受   lis   rar   otto   

Vue validation(表单验证)--vuelidate

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

1.需要验证的问题

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

2.Vuelidate

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

技术图片

首先我们来安装(Vuelidate)

1npm 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                emailnull
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。


技术图片

好用的表单验证工具 vuelidate

标签:成员   就是   size   tps   center   接受   lis   rar   otto   

原文地址:https://www.cnblogs.com/qinyuandong/p/13649728.html

版权声明:完美者 发表于 2020-09-17 21:32:13。
转载请注明:好用的表单验证工具 vuelidate | 完美导航

暂无评论

暂无评论...