在前端开发中，表单校验是常见的需求。而 Z-Schema 是一个 JSON Schema 验证器，它支持字符串、数字、布尔值、数组、对象、枚举等类型的数据校验，可以用来校验表单数据的有效性。不过在使用过程中，我们可能会遇到一些不太友好的错误信息。这时，我们可以使用 z-schema-errors 这个 npm 包来输出人性化的错误提示信息。
安装
z-schema-errors 的安装非常简单，只需要在项目中运行以下命令：
--- ------- --------------- ------
使用方法
将 z-schema-errors 引入到项目中
在页面中先用 ES6 的方式引入依赖：
------ - -- ------------- ---- -----------------
或者在 node.js 中使用 require：
----- ------------- - --------------------------
校验 JSON 数据
我们可以通过 ZSchemaErrors 来校验 JSON 数据的有效性。下面是一个示例：
----- ------ - -
------- ---------
------------- -
------- -
------- ---------
------------ -
--
------ -
------- ---------
---------- --
-
--
----------- -------- ------
--
----- ---- - -
------- -------
------ --
--
----- ------ - ---------------------------- --------
-- -------- -
--------------------
- ---- -
-----------------------
-运行结果：
- ---- ---- -------- ------------ ------ ---- ----- ------- ---- ---- ------- ----------- ------ ---- ----- ---- -
我们可以看到，错误信息中包含了校验路径（JSON Pointer）和原因。
自定义错误提示信息
为了定制化错误提示信息，我们可以在 JSON Schema 中添加如下信息：
-
------- ---------
------------- -
------- -
------- ---------
------------ --
--------------- -------------
--
------ -
------- ---------
---------- ---
--------------- ---------
-
--
----------- -------- ------
-这样，我们在进行校验时，错误信息将会被替换为自定义的信息。需要注意的是，如果你将错误提示信息定义在 "default" 中，那么这些信息将会作为默认错误信息被使用。如果你的 JSON Schema 中既定义了一个 "default" 错误提示信息，又针对某个字段自定义了错误提示信息，那么自定义的错误信息将会被优先使用。
自定义错误信息的模板格式
另外，我们还可以通过模板来自定义错误信息的格式。模板中包含了一些占位符，它们将会被替换成相应的内容。例如：
------------- --- ------------- ------------ ----
在对应的属性校验失败时，修改 "errorMessage" 属性的定义，可以在错误信息中将 ${error} 和 ${minLength} 占位符替换为具体的值。即：
-- ------------ ------ ---- ----- ----- ---- - ---
自定义 Validator
ZSchema 也支持自定义 Validator，有时候我们可能需要根据复杂的业务逻辑，自定义一些校验规则。因为自定义 Validator 可能比较复杂，所以我们需要在一个独立的文件中定义它，例如 my-custom-validator.js：
----- ------------- - ---------------------------
-------------- - --------- ------- ----- -- -
-- ----
-- -------------- -
-- ---------- --- ------------- -
-------------------------------- -
----- ------------------------
-------- ------------------ -- ---------
---
-
-
--自定义 Validator 接受三个参数：
zSchema：ZSchema 实例schema：当前可被 ZSchema 解析的 JSON Schema 定义json：待校验的 JSON 数据
自定义 Validator 在校验的过程中会被调用，如果我们需要为当前数据添加特殊的校验，可以使用 setError() 为当前数据添加一条新的错误信息。setError() 接受两个参数：错误类型和错误信息对象。
定制错误类型
除了通过自定义 Validator 定制错误类型，我们也可以直接为 ZSchemaErrors 定制并注册一个新的错误类型，例如：
------------------------------------- - -------- ----------- --- ----- ------ - - ------- --------- ------- ------- ------ -- ----- ---- - ------ ----- ------ - ---------------------------- -------- -- -------- - -------------------- ----------------------------- -- ---------- --- ------------ - ---- - ----------------------- -
这里我们使用 setErrorType() 为 ZSchemaErrors 注册了一个名为 my-type 的新错误类型，取代了 ZSchemaErrors 默认使用的有效性错误类型 "validation"。我们还使用了 some() 判断了是否存在 my-type 类型的错误。
总结
以上是 z-schema-errors 的使用方法介绍，希望对大家在前端开发中使用此 npm 包做出一些帮助。通过定制错误提示信息或自定义 Validator，可以更好地适应实际需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57068