【第998期】JSON schema与表单验证

前言

每年最难过的时间就是现在这个时候了。今日早读文章由美团金融前端团队@神机算子分享。

正文从这开始～

表单验证是一个前端常聊的问题，在这个问题上实际上已经有很多种方案了，大体来说有以下两种：

• 自己定义验证原语，进行简单封装，按需定制。这个方案好在对于简单的小表单上手快，几经提炼可以形成自己的验证库，也可以代码保持的精简。但是出现跨项目复用的时候，容易出现需要补充大量新场景的情况，而且稳定性也不容易保证。

• 使用市面上已有的表单验证库。这个方案能秒杀大部分场景，但可定制性往往比较差，有些验证库方案甚至是基于某种组件库的。另一方面，一旦开始使用某种验证库，未来想要切换就非常棘手。

那么这里说的方案是否能超越这两种方案呢？这要从JSON Schema本身是什么说起。

JSON Schema是一种用JSON数据来描述需要验证的JSON的格式。利用这种格式，可以做到：

• 有据可依。每一种验证方式都有固定的写法，即使某一天跨语言，也只需很小的迁移成本。

• 包罗万象。JSON Schema是一个在不断发展的标准，基本上你想要的验证方法都在里面囊括了。

• 文本为准。JSON本身只是一段文本，因此这种验证方法无需特别的工具即可编写，也很利于保存和分享。

ajv是JS实现的JSON Schema库。目前来说，它的性能和标准实现覆盖都比较好，具体可以看它项目主页的自我宣传。

在不使用任何验证库、验证工具的情况下，要验证表单需要逐个字段进行读取、判断。表单字段越多，代码的复杂度就越高，而且如果多个表单存在一定的共性，如何复用表单验证也是一个麻烦事。

比如：

单从可读性来说，这段代码非常易读，因为它足够直白、简单，但如果所有的表单验证都这样做，非常容易出错，也不便于维护。

ajv本身只是一个验证工具，这个工具接受一个JSON Schema和你的目标数据，然后返回验证结果。和其他很多验证工具类似，ajv提供了默认的报错文案，默认情况下是英文的。

不过这个无法满足产品对表单验证的需求。理想的表单验证实际上包含以下需求：

• 对于每个异常的字段，都需要指出其错误

• 错误需要是产品自己所希望的文案，而不是某种库的内置文案，更别说是英文或者代码中的字段名了

• 表单验证需要是有序的。直觉上来说，表单验证需要先报页面上最顶端的字段的问题。

对于第一点，ajv完善提供了错误信息。但对于第二点，ajv没有提供比较好的方式来处理，因为它的报错信息是非常程式化的，对于某一类错误，它的文案都是套路。