前言
在开发前端应用时，表单验证是一个常见且必备的功能。使用 npm 包可以方便我们在项目中引入表单验证，并减少重复造轮子的工作。本文将介绍 npm 包 @ontohub/react-form-validation 的使用方法，并且提供详细的示例代码。
安装
使用 npm 安装 @ontohub/react-form-validation：
--- ------- ------------------------------
使用方法
基本用法
------ ----- ---- --------
------ - -------- -------- - ---- ---------------------------------
-------- ------------ -
----- ------ -------- - ---------
-------------- -
------ ---
--------- ---
---------------- ---
--
--------- ------ -- -
--------------------
--
---
----- ----- - ----------------- ----- -
------------ ------------ ---------
---
----- -------- - -------------------- ----- -
------------ ------------ ---------------
---
----- --------------- - --------------------------- ----- -
------------ ------------ -------------------------
---
------ -
----- -----------------------------
-----
---------------------
------ ------------ --------------------- --
------------------- -- ---------------- -- ------------------------------
------
-----
------------------------
------ --------------- ------------------------ --
---------------------- -- ------------------- -- ---------------------------------
------
-----
-------------- -----------------
------ --------------- ------------------------------- --
----------------------------- -- -------------------------- -- ----------------------------------------
------
------- -----------------------------
-------
--
-在上例中，我们使用了 @ontohub/react-form-validation 提供的 useForm 和 useField hook。useForm 返回一个包含表单状态和处理表单提交的 handleSubmit 的对象。useState 用于声明表单初始值，onSubmit 属性则指定表单提交后的处理逻辑。
useField 接受三个参数：表单字段名、表单状态和配置项。其中，配置项可选，用于指定表单字段的校验规则。
常用校验规则
@ontohub/react-form-validation 内置了一些常用的校验规则，我们可以在 useField 的配置项中使用这些规则：
- required: 必填项
- email: 邮箱格式
- minLength:N: 最小长度 (N 是最小长度)
- confirmation:fieldName: 确认项，fieldName 是确认的字段名
我们也可以自定义校验规则。下面是一个自定义校验规则的示例：
------ ----- ---- --------
------ - -------- -------- - ---- ---------------------------------
-------- ------------ -
----- ------ -------- - ---------
-------------- -
--------- ---
--
--------- ------ -- -
--------------------
--
---
----- -------------- - ------- ---------- -- -
-- ------------------- --- -------- -
------ --------- ------- ---------
-
-
----- -------- - -------------------- ----- -
------------ ------------ ----------------
---
------ -
----- -----------------------------
-----
------------------------
------ ----------- ------------------------ --
---------------------- -- ------------------- -- ---------------------------------
------
------- -----------------------------
-------
--
-在上例中，我们定义了一个名为 verifyUsername 的校验方法，并将其传递给 useField 方法。如果校验失败，verifyUsername 应该返回一个字符串。在调用 useField 时，传递 validations 属性，其中包含 verifyUsername 方法。
校验异步数据
异步数据校验是一种常见需求，@ontohub/react-form-validation 支持使用 async 标记的自定义方法进行异步数据校验。在这个示例中，我们需要进行一个异步校验，以验证电子邮件是否已经被注册：
------ ----- ---- --------
------ - -------- -------- - ---- ---------------------------------
-------- ------------ -
----- ------ -------- - ---------
-------------- -
------ ---
--
--------- ------ -- -
--------------------
--
---
----- ------------- - ----- ----- -- -
----- -------- - ----- -----------------------------------------------------
----- ---- - ----- ----------------
------ ------------- - --------- - ------ -- ------- --------
-
----- ----- - ----------------- ----- -
------------ ------------ -------- ---------------
---
------ -
----- -----------------------------
-----
---------------------
------ ------------ --------------------- --
------------------- -- ---------------- -- ------------------------------
------
------- -----------------------------
-------
--
-在上例中，我们定义了一个 async 标记的方法 isEmailUnique，该方法需要返回 undefined 或者错误信息作为结果。在调用 useField 方法时，我们将 isEmailUnique 方法传递给 validations 属性，@ontohub/react-form-validation 就会自动生成一个正在验证的状态，并在异步操作结束后更新表单字段的验证状态。
验证组件
如果需要对表单中的多个字段进行校验，或者需要对表单中的多个组件进行联合校验，我们可以使用 @ontohub/react-form-validation 提供的 ValidatedForm 组件。
------ ----- ---- --------
------ - -------- --------- ------------- - ---- ---------------------------------
-------- ------------- -
----- ------ -------- - ---------
-------------- -
------ ---
--------- ---
---------------- ---
--
--------- ------ -- -
--------------------
--
---
----- ----- - ----------------- ----- -
------------ ------------ ---------
---
----- -------- - -------------------- ----- -
------------ ------------ ---------------
---
----- --------------- - --------------------------- ----- -
------------ ------------ -------------------------
---
------ -
-------------- ------------
-----
---------------------
------ ------------ --------------------- --
------------------- -- ---------------- -- ------------------------------
------
-----
------------------------
------ --------------- ------------------------ --
---------------------- -- ------------------- -- ---------------------------------
------
-----
-------------- -----------------
------ --------------- ------------------------------- --
----------------------------- -- -------------------------- -- ----------------------------------------
------
------- -----------------------------
----------------
--
-在上例中，我们使用了 ValidatedForm 组件进行表单验证。组件接受一个 form 属性，该属性应该包含表单状态和 handleSubmit 方法。在使用 ValidatedForm 组件时，被包含的表单字段应该使用 useField 并将 form 传递给它。
总结
@ontohub/react-form-validation 提供了方便的表单验证功能，可以大大减少开发工作量，并在一定程度上保证了开发应用的质量。本文介绍了 @ontohub/react-form-validation 的基本用法和常用功能，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055cbf81e8991b448da55a