简介
在前端开发中，表单验证是非常常见的需求。为了减少开发者的工作量，很多开发者会选择使用已有的表单验证工具库。其中，npm 包 user-input-validation 相对较为轻量，易用且可扩展。
user-input-validation 提供了一种基础的表单验证方式，其核心思想是将验证逻辑和错误提示分离开，并采用函数式编程风格，以便于我们在不同场景下使用这些逻辑。在这篇文章中，我们将一步步地介绍如何使用 npm 包 user-input-validation 实现表单验证。
安装
我们可以通过 npm 安装 user-input-validation，打开终端，输入以下命令：
--- ------- ---------------------
使用
user-input-validation 主要提供两个 API，我们分别介绍它们的使用方法。
验证规则
user-input-validation 提供了常见的表单验证规则，我们可以通过这些规则来验证表单数据的正确性。比如，我们想验证一个输入框中的内容是否是一个有效的电子邮件，我们可以使用如下代码：
----- --------- - --------------------------------- ----- ------------ - ---------------------------------------- --------------------------
注意，我们需要在 validator 对象上调用 isEmail 方法，并将需要验证的电子邮件地址传入。如果验证通过，该方法将返回 true，否则返回 false。
除了 isEmail 方法，user-input-validation 还提供了一系列其他方法，请参考 package.json 中的 description 部分。
错误提示
验证通过与否只是验证流程的一部分，更重要的是如何向用户呈现错误信息。user-input-validation 提供了一个方便的方式，我们可以通过它来为每一个验证规则指定一个错误提示。可以参考如下的示例代码：
----- --------- - --------------------------------- ----- ------------- - ------------------------------------------ -------- ----- ---------- ----- ------------ - -------------------------------- --------------------------
在上述示例代码中，我们首先调用 makeValidator 方法，将需要验证的逻辑和一个错误信息传入。然后，我们可以通过调用这个生成的验证函数来验证一个具体的输入值，并检查其是否有效。
扩展
除了提供一些基本的验证规则外，user-input-validation 还提供了扩展 API，以便我们可以创建自己的验证规则。
Rule
user-input-validation 暴露了一个 Rule 对象，可以用于自定义规则。Rule 本质上是一个函数，接受两个参数：待验证的值（input）和错误提示消息（message）。它需要返回一个对象，该对象应该具有两个属性：valid 和 message。如果 valid 为 true，则表示验证通过，否则表示验证失败。
以下是一个自定义 Rule 的简单示例：
----- --------- - ---------------------------------
----- ------ - ---------------------- -------- -- -
----- ------- - ---------
----- ------- - --------------------
------ ------- - - ------ ---- - - - ------ ------ ------- --
---
----- ------------ - ------------------------------- ---- - ----- -------
---------------------------------
---------------------------------在上示例中，我们创建了一个名为 myRule 的 Rule 实例，该 Rule 实例实现了自定义的规则。它首先通过正则表达式验证输入值的有效性，如果输入值中有数字，则认为验证通过。否则，它会向客户端提示 “Not a valid rule” 错误。
Custom Validator
user-input-validation 还提供了 CustomValidator 的 API，我们可以通过 CustomValidator 来扩展默认验证器的功能。
以下代码展示了如何扩展 CustomValidator 并创建自定义的验证器：
----- --------- - ---------------------------------
-------------------------------------------- - -------- --------- -
----- ----- - ---------------------------
------ ---------------- ------- -- ------- ----- ------ -- ----------
--
----- ------------- - ----------------------------------
---------------------------在上述代码中，我们通过 CustomValidator 的 prototype 属性添加了一个名为 isMobile 的方法。该方法接受一个错误信息作为可选参数。在这个方法内部，我们使用一个正则表达式来验证手机号码的有效性，并返回一个结果对象。
Schema
Schema API 也是 user-input-validation 中比较重要的一个部分。Schema 在验证表单数据时，可以显著地减少代码量，以及提高代码的可维护性和可读性。
以下代码展示了如何使用 Schema 验证表单数据：
----- --------- - ---------------------------------
----- ------ - ------------------
--------- ------------------------------------------------
--------- ------------------------------------------------
------ --------------------
---- --------------------------------
------ --------------------------------------- ------ --- ----- --- ------------
---
----- ---------- - -
--------- ----------
--------- ---------
------ ----------
---- ---
------ -----
--
----- ---------------- - -------------------
------------------------------在上述代码中，我们首先创建了一个 Schema 对象，它描述了我们想要验证的表单数据。然后，我们定义了一个名为 formValues 的表单数据对象，调用 Schema 对象中的方法来验证这些数据。
最后，我们打印出包含验证结果的 validationResult 对象。你会看到，validationResult 是按照表单的结构来组织的一个对象，它指示了每个表单元素是否符合验证规则，并提示了相应的错误信息。
结论
在本文中，我们详细地介绍了 npm 包 user-input-validation 的使用教程。我们讲解了基本的验证规则验证以及错误提示等概念，并向大家展示了如何通过自定义 Rule 和 CustomValidator 扩展默认验证规则。此外，我们还使用了 Schema API 验证了表单数据。通过阅读本文，相信大家已经掌握了 user-input-validation 的使用方法，以便于更快更好地实现表单验证。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60058c3781e8991b448ed416