好用的表单验证工具 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 | 接受正负十进制数。 |
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。
最新文章
- Android 更新UI的几种方式
- intel 系列的PC机处理器是大端的还是小端的?
- ADB无线连接
- C#5.0之后推荐使用TPL(Task Parallel Libray 任务并行库) 和PLINQ(Parallel LINQ, 并行Linq). 其次是TAP(Task-based Asynchronous Pattern, 基于任务的异步模式)
- Web--->;>;>;Cookie与Session
- C# - Byte类型与String类型互转
- android 线程池的使用
- 【单源最短路模板】 poj 2387
- H5学习第三周
- JVM 掌握要点
- 9.1、Libgdx的输入处理的配置和查询
- bzoj5251 [2018多省省队联测]劈配
- Python库的安装
- java基础(十三)-----详解内部类——Java高级开发必须懂的
- [js]练习绘制拓扑图
- 蓝桥杯 剪邮票(dfs枚举 + bfs)
- .NetCore Session.Redis
- 记录怎样把安全证书导入到java中的cacerts证书库
- [转]Spring Boot应用的后台运行配置
- Eclipse “cannot be resolved to a type”