在前端开发中，经常会涉及表单校验的问题。为了方便开发者进行表单校验，许多团队开发了各种各样的表单校验插件。@ozylog/validator 就是其中之一，它提供了一套简洁易用的接口，可以轻松地进行表单校验。
安装
@ozylog/validator 可以通过 npm 安装。
--- ------- ----------------- ------
使用
导入
在需要使用 @ozylog/validator 的文件中，通过以下方式导入：
------ --------- ---- -------------------
配置
构建校验规则的主要方式是通过设置一个规则对象。该规则对象描述了每个验证器应用于每个表单字段。该规则对象应该根据表单字段的名称来命名。
例如，如果有一个表单，其中包含“name”和“email”字段，则规则对象应该如下所示：
----- ----- - -
----- -
--------- -----
------- - -------- - --
--
------ -
--------- -----
------ -----
--
-在这个例子中，规则对象定义了两个字段：名称和电子邮件。每个字段都有一个包含其验证器的对象。
校验
验证表单数据的示例代码如下：
----- ---- - - ----- ------- ------ ------------------- - ----- ------ - --------------- ------ -- ------- --- ----- - ----------------------- ------------ - ---- - ------------------- -
validator 函数接受两个参数：要验证的数据和规则对象。如果验证成功，则函数返回 true。否则，它返回一个包含错误对象的数组。
在上面的例子中，由于表单数据符合规则，所以验证成功，并输出“Validation succeeded!”。
在实际项目中，我们可以将表单数据和规则对象分别存储在一个 state 中，并且每次输入框的变化都会触发表单验证。
------ ------ - -------- - ---- -------
------ --------- ---- -------------------
----- --- - -- -- -
----- ------ -------- - ----------
----- ---
------ ---
--
----- ------- - ----------
----- -
--------- -----
------- - -------- - --
--
------ -
--------- -----
------ -----
--
--
----- ------------ - ------- -- -
--------- -------- -------------------- ------------------ --
-
----- ------------ - ------- -- -
----------------------
----- ------ - --------------- ------
-- ------- --- ----- -
----------------------- ------------
- ---- -
-------------------
-
-
------ -
----- ------------------------
-------
-----
------ ----------- ----------- ----------------- ----------------------- --
--------
--- --
-------
------
------ ------------ ------------ ------------------ ----------------------- --
--------
--- --
------- -----------------------------
-------
-
-
------ ------- ---在上面的例子中，我们使用了 React Hooks 实现了表单的验证。
常用验证器
@ozylog/validator 提供了许多常用验证器。下面是一些常用验证器的列表和说明。
presence
该验证器检查一个字段是否有值。如果该字段没有值，则该验证器会失败。
----- ----- - -
----- -
--------- -----
--
-length
该验证器检查一个字符串字段是否具有特定的长度。
----- ----- - -
----- -
------- - -------- -- -------- -- --
--
-该验证器检查一个字符串是否具有电子邮件格式。
----- ----- - -
------ -
------ -----
--
-format
该验证器检查一个字符串是否符合某个特定格式。
----- ----- - -
------ -
------- - -------- ---------------- -------- -------- ----- ------- --
--
-inclusion
该验证器检查一个字段是否是某个特定数组中的值。
----- ----- - -
----- -
---------- - --- --------- ------- --
--
-exclusion
该验证器检查一个字段是否不是某个特定数组中的值。
----- ----- - -
----- -
---------- - --- -------------- ----------- --
--
-结语
@ozylog/validator 是一个简单易用的表单校验插件。通过阅读本文，你已经可以学习到如何使用该插件，同时也学习了一些常用的验证器。希望这篇文章对你的前端开发工作有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eaf81e8991b448dc3cd