前端开发中，表单验证是一个必不可少的功能。而 formsy-react-patched 就是一个常用的表单验证库。这个库基于 formsy-react 开发，但相比于原版，它具有更高的可扩展性和更丰富的 API。本文将详细介绍 formsy-react-patched 的使用方法，包括必要的安装和配置步骤，以及如何用它来实现表单验证功能。
安装 formsy-react-patched
formsy-react-patched 可以通过 npm 包管理工具进行安装。在终端中执行以下命令：
npm install formsy-react-patched --save
配置 formsy-react-patched
首先，在引入 formsy-react-patched 之前，需要先引入 react 和 react-dom：
import React from 'react'; import ReactDOM from 'react-dom';
接下来，引入 formsy-react-patched：
import Formsy from 'formsy-react-patched';
创建表单
formsy-react-patched 提供了一个名为 Formsy 的组件，用于创建表单。在创建表单之前，需要定义一些表单元素。下面是一个示例代码，其中包含了两个表单元素：一个文本框和一个按钮。
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- --
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
------------------------ -
-------------------------- ---------------------
-
-------------- -
------------------- ------ -----------
-
-------- -
------ -
--------
------
-----------------
-----------
-----------------------------
---------------------------------
--
------- -------------------------------------------
---------
--
-
-这里先简单地定义了两个回调函数 handleInputChange 和 handleSubmit，并将它们分别绑定到了文本框和按钮的事件上。接下来，将这两个组件放在了 Formsy 组件的内部。
添加验证规则
接下来，我们将添加一些验证规则，以确保表单数据的有效性。在 formsy-react-patched 中，验证规则可以通过表单元素的属性来添加。
在这个示例中，我们将添加一个必填（required）验证规则：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- --
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
------------------------ -
-------------------------- ---------------------
-
-------------- -
------------------- ------ -----------
-
-------- -
------ -
--------
------
-----------------
-----------
-----------------------------
--------
---------------------------------
--
------- -------------------------------------------
---------
--
-
-我们将文本框的 required 属性设置为 true，以此来添加必填验证规则。
验证表单
formsy-react-patched 提供了一个非常方便的方式，用于检查所有表单元素是否都通过了验证。只需在表单元素的父元素中添加 onSubmit 属性即可：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - -
----------- --
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
------------------------ -
-------------------------- ---------------------
-
-------------- -
------------------- ------ -----------
-
-------- -
----- --------- - -- -- -
------ ----- -- ----- --- ---------- ----- ----
--
------ -
------- ---------------------------- ----------------------------------
------
-----------------
-----------
-----------------------------
--------
---------------------------------
--
------- ------------- ---------------------------------------
---------
--
-
-在这个示例中，我们实现了一个可以始终返回 true 的函数 canSubmit，来占位代替验证逻辑。当点击提交按钮时，如果所有表单元素都通过了验证，则可以执行 handleSubmit 回调函数。此外，我们还添加了一个 disabled 属性，用于禁用按钮，以便在某些情况下防止用户提交无效表单数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562de81e8991b448e05b4