Formsy-React 是一个 React 表单验证库。 它允许您构建强大的验证表单，统一管理表单状态，并自定义错误消息。 这篇文章将会介绍一个称为 @s524797336/formsy-react 的 npm 包，它扩展了 Formsy-React 的功能，让表单验证过程更加简单和方便。
1. 安装
首先，您需要安装 Formsy-React 和 @s524797336/formsy-react。 可以通过以下命令来完成依赖的安装：
npm install --save formsy-react @s524797336/formsy-react
2. 示例
下面的示例展示了如何使用 @s524797336/formsy-react 从后端 API 获取表单模型，验证表单数据，以及当表单验证失败时展示自定义错误消息。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------ ---- ---------------
------ ----------- ---- ---------------------------------------
----- ------ ------- --------- -
------------------ -
-------------
---------- - - ------ --- ------------- ---- --
-
------------------- -
-- ----- --- ---- ----- ---- --- ------- ---
------------------------
-------------- -- ----------------
----------- -- --------------- ------ ----- ---
------------ -- -
-------------------- -------- ---- -------- -------
--------------- ------------- ------ -------- ---- ------ ---
---
-
-------------- ---------- --------------- -
-- ---- --- ---- ---- -- --- ------- --- --- ---------- --- -------
------------------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------------
--
-------------- -- -
-- ---------------- --- ---- -
------------ -- ----- --- ---- -- --- ------- -----
----------- --------- ----------------
- ---- -- ---------------- --- ---- -
--------------------------- -- -
-- ------- ------ ----- -------- --- -------- ------ --- -------- -- --- --------
---------------
------------- -----
------ ----------------- ----------------- -
------- ------------------- ------ -- -
---------------- - --------------
------ ----
-- ---
--
---
-- ---------- --- ---- ---- ------ ---- --- -------
---------------------------------- ------ -- -
---------------- - --------------
------ ----
-- -----
---
- ---- -
----- --- ----------------- -------- ---- --------- ----------
-
--
------------ -- -
-------------------- ---------- ------- -------
------------ ---------- ----- ------ --- ----- ---------
---
-
-------- -
----- - ------ ------------ - - -----------
-- -------------- -
------ --------------------------
-
-- --------------- -
------ ----------------------
-
------ -
------- -----------------------
----------------------- -- -
---- -----------------
------ ------------------------------------------
------------
-----------------
-----------------
-------------------------------
----------------------------- - ------------------------ - -----
--
------
---
------- -----------------------------
---------
--
-
-在这个示例中，我们首先从后端 API 获取表单模型，然后通过 @s524797336/formsy-react 的 FormsyInput 组件对表单进行验证。 当表单提交时，通过 fetch API 将表单数据发送到后端 API 进行验证，如果表单验证失败，我们将展示自定义错误消息。 通过设置 validationError 属性，我们可以为每个表单字段指定错误消息。
3. 深度解析
@ s524797336/formsy-react 包含多个组件，其中最常用的组件是 Forms、FormsyInput、FormsyRadioGroup 和 FormsySelect。
3.1 Forms 组件
-- -------------------- ---- -------
------ - ---------- - ---- ---------------------------
----- ------ ------- --------- -
-- ---
-------- -
----- - --------- ------- - - -----------
------ ----- ----------------------------
-
-
------ ------- -------------------Forms 组件是一个高阶组件，通过 withFormsy 函数将传入的组件包装成支持 Formsy 的组件。 此处，我们将 MyForm 组件包装成了 Forms 组件。
3.2 FormsyInput 组件
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
----- ------- ------- --------------- -
----------- - ------- -- -
-----------------------------------------------
-
-------- -
----- - ----- ----- --------- ---------------- ---------- - - -----------
----- ------------ - ------------------
------ -
-----
------
-----------
-----------
---------------------------
------------------
---------------------
--
------------- -- ----------------------------
------
--
-
-
------ ------- --------------------FormsyInput 是 Forms 的核心验证组件。 它将表单数据的获取、验证和错误消息的生成组合在一起。当表单值改变时，它会调用 props.setValue 将值设置为 state 中的新值，然后通过 props.getValue() 获取当前值。props.getErrorMessage() 返回当前表单字段的错误消息，如果该字段通过验证，则返回 null。
3.3 FormsyRadioGroup 组件
FormsyRadioGroup 是用于单选框组的组件，可以将多个 FormsyInput 组件绑定到一个单选框组。它允许您在单选框组内进行验证，而无需编写额外的验证逻辑。
3.4 FormsySelect 组件
FormsySelect 是用于下拉列表的组件。它提供了用于设置选项、验证错误消息和处理选项更改事件的 API。
4. 总结
在本文中，我们介绍了 @s524797336/formsy-react，它是一个扩展 Forms 和 Forms 组件集的 npm 包。 我们通过一个完整的示例和深入的解析，了解了如何使用 @s524797336/formsy-react 构建表单，如何验证表单，以及如何处理错误消息。 使用 @s524797336/formsy-react，您可以更轻松地编写复杂的表单，并以更清晰和简洁的方式管理表单验证和错误消息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562bd81e8991b448dfff0