介绍
web-form-validator 是一个 npm 包，用于前端表单验证。它可以通过简单的配置来自动验证表单，并提供了丰富的验证规则。此外，该库还支持自定义验证规则和 UI 样式。
安装
使用 npm 安装 web-form-validator：
npm install web-form-validator
用法
为了使用 web-form-validator，需要引入它并对表单进行配置。以下是一个简单的例子：
-- -------------------- ---- -------
----- ----------
-------
------
------ ------------ ------------ ---------
--------
-------
---------
------ --------------- --------------- ---------
--------
------- -----------------------------
-------
------- --------------
------ - -------- - ---- ---------------------
----- ------ - -
--------- --------- --------- -- -
-- --------- -
----------------------
-- ------
-
--
------ -
------ -
--------- -----
------ ----
--
--------- -
--------- ----
-
-
-
----- ---- - --------------------------------
-------------- --------
---------在此示例中，使用 validate() 函数对表单进行配置。此函数需要两个参数：要验证的表单元素和一个配置对象。配置对象包含一个 onSubmit 回调和一个 rules 对象，它定义了每个验证字段的要求。
在这个例子中，仅仅 email 和 password 两个字段是必须的。除此之外，email 字段还需要符合电邮格式。
当用户提交表单时， validate() 函数将执行验证。如果通过验证，它将调用 onSubmit 回调并将表单数据以及验证结果作为参数传递。
验证规则
以下是 web-form-validator 支持的验证规则：
| 名称 | 描述 |
|---|---|
email |
检查字段是否为电邮格式 |
url |
检查字段是否为 URL 格式 |
password |
检查密码是否符合最低强度 |
minLength |
字段中要求的最小字符数 |
maxLength |
字段中要求的最大字符数 |
required |
字段是否必需 |
number |
字段是否为数值 |
integer |
字段是否为整数 |
positive |
字段是否为正数 |
negative |
字段是否为负数 |
自定义规则
如果默认验证规则不足以满足需求，可以使用 addValidator() 函数添加自定义规则。以下是一个示例：
import { addValidator } from 'web-form-validator';
addValidator('evenNumber', {
validator: (value) => {
return value % 2 === 0;
},
message: '该字段必须为偶数'
});在此示例中，将 evenNumber 添加到 web-form-validator 中。该规则检查字段是否为偶数。如果验证失败，它将显示一个错误消息。
UI 样式
web-form-validator 不包含任何 UI 样式。然而，它提供了一个 setErrorHandler() 函数来自定义错误输出。
以下示例演示如何在字段旁边显示错误消息：
-- -------------------- ---- -------
----- ---- - --------------------------------
----- ---------- - ------------------------------------------
-------------- -
--------- --------- -- -
-- --------- -
---------------------
-
--
------ -
------ -
--------- -----
------ ----
--
--------- -
--------- ----
-
-
---
----------------------- ------- -- -
----- ------- - --------------------
----- -------- - --------------------------------
-- -------------- - -- -
-- ----------- -
----- --- - ------------------------------
---------------------------
-------------------------
-------- - ----
-
------------------ - --------------------
-------------------------------
- ---- -
-- ---------- -
------------------
-
----------------------------------
-
---
------------------------------------ -- -- -
---------------------
---在此示例中，使用 setErrorHandler() 函数自定义错误信息的输出。该函数接受两个参数：验证失败的输入元素和一组错误消息。
当输入框全部通过验证时，isValid 参数为 true，因此可以使用它在表单提交时执行一些操作。
结论
web-form-validator 是一个强大且易于使用的 npm 包，可简化前端表单验证的开发。借助它支持的默认规则和自定义规则，用户可以轻松地设置验证需求，并完全控制 UI 样式。请尽情使用，并在使用中有所启发！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600568ef81e8991b448e4a39