前端如何做大量的数据校验？json schema配置详解
这篇文章主要介绍如何使用json schema，如果你已经对它很熟悉了，可以不用继续往下看了，节约时间。
场景一：
几年前我在我的老东家做发布业务，每天开发表单，对于用户输入的各种数据都要进行校验，校验逻辑写了一堆，特别繁琐。
场景二：
用过webpack的小伙伴肯定知道，在使用webpack之前需要写一个配置文件webpack.config.js。我相信大多数前端并不知道其实webpack的配置有上百个，如果每个配置属性都需要webpack的作者去写一个校验逻辑，那我估计作者就没时间去拓展webpack的功能了。
有没有什么办法去简化这样的校验工作？有，json schema就可以帮我们去做这样的事情。下面开始介绍如何配置json schema，虽然有点枯燥，但是如果你连语法都不清楚，那如何去使用呢？
简单类型
在json schema中有以下几个类型，
- string
- boolean
- null
- enum
- Numeric types
- array
- object
首先来看一下string类型
图1
如图1所示，左侧是schema，右侧是需要验证的数据（也被称为实例）。type是关键字，代表数据的类型，此处我们验证数据是不是字符串，发现结果是ok的。
咱们还可以限制字符串的长度，如下：
图2
minLength代表最小长度，maxLength代表最大长度。也可以通过正则去校验字符串，如下：
图3
pattern属性可以用来写正则，不过普通正则的语法支持的不多，所以如果你发现有些正则关键字不生效，你也不要惊讶。
类型null和boolean比较简单，没什么好说的。
其实枚举也很简单，如下：
{
"type": "string",
"enum": ["red", "amber", "green"]
}提供几个可选的值，如果枚举的值只有一个，可以使用const属性
{
"type": "string",
"{
"type": "string",
"enum": ["red", "amber", "green"]
}"
"enum": ["red"]
}类型是Numeric，它有两种写法，一种是integer，它只能是整数，不能是浮点数。另外一种是number，它既可以是整数也可以是浮点数，如下图
图4
图4中，multipleOf属性代表数据只能是这个属性值的倍数，比如上图1.2是0.6的2倍，验证通过，如果数据是1.3，校验就会失败。数字当然也是能够限制大小的，4个属性如下：
- x ≥ minimum
- x > exclusiveMinimum
- x ≤ maximum
- x < exclusiveMaximum
接下来就是数组类型——array，用法和上面一样，如果你想校验数组的元素可以用items属性，如下：
图5
图6
上图中additionalItems属性代表数组额外添加的元素的类型，此图中本来只有两个数组元素，如果添加第三，那它必须是bool类型。additionalItems属性也可以直接是bool值，代表允许或者不允许添加额外的元素。还有其他的属性如下：
- minItems和maxItems代表数组的最小长度和最大长度；
- uniqueItems代表数组的元素能否重复；
- contains代表数组必须包含某种类型。
最复杂的就是描述一个对象，类型是object，如下：
图7
如图7所示，可以在properties属性中定义数据的key-value，required代表必须存在的属性。和数组一样，它也有个additionalProperties属性，代表有没有额外的属性添加，用法和数组一样。
图8
用propertyNames属性还可以对key做校验，另外，minProperties和maxProperties可以限制属性的个数。
还有一个有意思的属性是dependencies，它的含义是一个属性存在的前提是另外一个属性也存在。
图9
如图9，属性aa存在的前提是cc属性也存在，如果cc不存在，只有aa，那么就会报错。
结合类型
结合类型有三个
1、anyOf 代表只要匹配一个即可
图10
如上图，anyof数组中匹配任何一个即可。
2、allOf代表所有的类型都要匹配
图11
满足allof数组中的所有条件。
3、oneOf只能满足其中一个，都不满足或者满足一个以上都会报错
图12
4、not 和非一个意思，即不满足not指定的类型，校验就可以通过。
条件判断
直接上例子，如下：
图13
如图13所示，if为条件语句，if正确即校验then语句，if不正确校验else语句。图中因为a的数据是b，所以res的数据必须是bbb，反之就是ccc。
此语法没有if else语句，所以如果想要进行多个条件的判断可以和allOf配合使用如下：
图14
公共部分引用
对于一些重复的校验类型可以提取公共的部分，使用关键字definitions，如下：
图15
引用的时候使用$ref关键字，如果是在本文件定义的公共部分，直接用#/definitions/属性 即可。
如果是外部文件，也可以是相对或者绝对的URI地址。
几个特殊关键字
1、$schema属性可以声明使用的schema版本，也可当做schema的标识，因为schema本身也是json，有了这个属性，就代表它不是一个普通的json而是schema。
2、title属性标识一下名称；
3、description属性对schema做详细的描述；
{
"$schema": "http://json-schema.org/draft-07/schema#",
"$id": "http://example.com/product.schema.json",
"title": "Product",
"description": "A product in the catalog",
"type": "object"
}上面代码块中有一个关键字$id，它有什么用呢？
一是为了唯一标识这个schema，二是为ref提供base路径。以上面的代码块为例，如果ref的值是person.json，那么引用的整个路径就是http://example.com/person.json。
总结
这个文章就是教大家如何配json schema。
附一个在线校验地址：https://jsonschemalint.com/#!/version/draft-07/markup/json
来源：
https://www.toutiao.com/a6801366816913359372/
“IT大咖说”欢迎广大技术人员投稿，投稿邮箱：aliang@itdks.com
来都来了，走啥走，留个言呗~
IT大咖说 | 关于版权
由“IT大咖说（ID：itdakashuo）”原创的文章，转载时请注明作者、出处及微信公众号。投稿、约稿、转载请加微信：ITDKS10（备注：投稿），茉莉小姐姐会及时与您联系！
感谢您对IT大咖说的热心支持！合库开源项目