前言
在 Web 开发中，表单是必不可少的。但是，在表单验证上，很多开发者都遇到了棘手的问题。forms-validator 是一个通过 npm 安装的验证表单输入的开源 JavaScript 库。它能够轻松验证表单数据，提高 Web 应用的安全性和稳定性。
在本篇文章中，我们将介绍 npm 包 forms-validator 的使用方法，为开发者提供详细的学习和指导。
安装
首先，我们需要在本地项目中安装 forms-validator。在 command-line 中执行以下命令即可：
--- ------- ---------------
如何使用
在 HTML 中引入 forms-validator：
------- --------------------------------------
或使用 ES6 模块引入方式：
------ -------- ---- ------------------
API 介绍
validate(input, rules);
| 参数 | 描述 |
|---|---|
| input | 被验证的表单对象（必须是 HTMLInputElement） |
| rules | 规则数组 |
validate 方法接收两个参数。第一个参数是被验证的表单对象，必须是 HTMLInputElement。第二个参数是一个规则数组，定义了表单输入的验证规则。
Rule
规则对象，定义了一个表单输入的验证规则，包含以下属性：
| 属性 | 描述 |
|---|---|
| name | 该规则的名称，在调用 validate 方法时作为提示信息的一部分，必须唯一 |
| tests | 包含若干个测试对象的数组 |
| message | 用于错误信息向用户提示的字符串 |
| optional | 是否启用该规则的可选性 |
Test
测试对象，定义了一个验证规则中的测试，包含以下属性：
| 属性 | 描述 |
|---|---|
| expr | 正则表达式 |
| invert | 如果为 true，则反转测试结果 (not) |
示例
现在，假设我们有一个简单的表单，包含一些输入框，我们将使用 npm 包 forms-validator 来验证表单输入。首先，我们需要创建一个 inputs 数组，每一项表示表单中的一个输入框：
----- ------ - -
-
-------- --------------------------------
----- -------
------ --
----- -----------
------ ------- -------- ------- -------
-------- -------
--
--
-
-------- ---------------------------------
----- --------
------ --
----- -----------
------ ------- -------- ------- -------
-------- ---------
-- -
----- --------
------ ------- -------------------
-------- -----------
--
-
--在这个示例中，我们创建了一个 inputs 数组，它包含两个元素，每个元素代表一个输入框。在每个元素的 rules 属性中定义了验证规则。例如，在元素的第一个规则中，我们使用了 required 测试，并指定测试表达式为 /^\S+$/. 也就是说，验证输入框不为空或仅包含空白字符。
现在，让我们把验证的函数作为表单的提交事件处理程序。在这个处理程序中，我们使用了 for...in 循环来遍历输入框：
----- ---- - -------------------------------
------------------------------- - -- -
-------------------
--- ------ ----- -- ------- -
-- ------------------------- ------------- -
-------
-
-
-- ----------------
---在 for 循环中，我们调用 validate 方法验证输入框。如果验证不通过，则函数会立即返回。如果遍历完 inputs 后，所有输入框的规则都通过，就说明用户已经填写了有效的数据。
总结
在本篇文章中，我们介绍了 npm 包 forms-validator，它是一个轻量级的表单验证库。我们学习了验证表单的三个步骤：定义 inputs 数组、为每个输入框定义验证规则、并在表单提交时调用验证函数。
通过使用 npm 包 forms-validator，我们可以为我们的 Web 应用提供更加安全、可靠的表单输入验证功能，同时也可以更快地构建 Web 应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005670981e8991b448e3497