npm 包 formsy-react-form-inputs 使用教程
随着前端开发的发展，越来越多的人开始转向 react，而 react 有一个很强大的生态圈，其中 npm 作为一个重要的 react 库和包管理器，在 react 生态圈中扮演了重要的角色。在这里我们要介绍的是一个非常实用的 npm 包 - formsy-react-form-inputs。
formsy-react-form-inputs 是一个 react 组件，其主要作用是提供表单元素的输入验证和状态管理，可以帮助我们轻松地完成表单的开发和验证。具有以下特点：
- 与 react 非常兼容，并可以很好地集成进 react 项目中。
- 支持各种表单输入类型，如文本框，下拉框，单选框以及复选框等等。
- 支持自定义验证器，以满足不同的验证需求。
- 编写简单，使用容易。
安装
首先，我们需要安装 formsy-react-form-inputs 包，在命令行输入以下命令：
npm install formsy-react-form-inputs
安装完成后，就可以引入 formsy-react-form-inputs 组件，开始使用它了。
使用
基本使用
引入 formsy-react-form-inputs 组件，我们就可以使用它提供的表单控制组件了。比如我们可以很容易地定义一个文本框：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
----- --------- ------- --------------- -
-------- -
------ -
-----------
-----------
---------------------
--------------------- -- --- - ----- ------
--------
--
--
-
-在这里我们使用了 FormsyText 组件来定义一个文本框，其中 validations 属性表明了这个文本框应该进行哪种验证，而 validationError 属性是当验证失败时的错误提示，required 属性表示这个输入框是必须填写的。
自定义验证器
formsy-react-form-inputs 支持自定义验证器，以满足不同的验证需求。我们只需要编写一个验证函数并传递给控件的 validations 属性即可。比如，以下代码定义了一个自定义验证器：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- - ---- ---------------------------
----- ------------- ------- --------------- -
------------------ - ------- ------------------------- -- -
------ -----------------------------------------------------------------
-
-------- -
------ -
-----------
---------------
-------------------------------------
------------------------- ---- ------- -- ----- - --------- ------- - --------- ------- - ------ --- - ------- ----------
--------
--
--
-
-在这里，passwordValidation 函数接受表单元素的值，并使用正则表达式来进行验证。
示例代码
下面，我们将通过一个完整的 demo，来展示 formsy-react-form-inputs 的使用方式。在这个 demo 中，我们将使用 Formsy 组件库，主要包括 FormsyText，FormsyCheckbox，以及 FormsSelect 应用示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- --------------- ---------- - ---- ---------------------------
----- ---- ------- --------------- -
------------ - ------ -- -
------------------
-
------------------- - ------ -- -
----------------------- ------
-
------------------ - ------- ------------------------- -- -
------ -----------------------------------------------------------------
-
-------- -
------ -
------------ ---------------------------- -------------------------------------------
-----------
------------
---------------------
--------------------- -- --- - ----- ------
-------------------
--------
--
-----------
---------------
-------------------------------------
------------------------- ---- ------- -- ----- - --------- ------- - --------- ------- - ------ --- - ------- ----------
----------------------
--------
--
-------------
-------------
--------
--------------
----------
- ------ ------- ------ ------ --
- ------ --------- ------ -------- --
--
--------
--
---------------
---------------------
------------ -- ----- -- --------
-------- ----- -- --- ----- -- --------
--------
--
------- -----------------------------
--------------
--
-
-
------ ------- -----在这个 demo 中，我们定义了三个表单元素：一个邮箱输入框，一个密码输入框，一个下拉框以及一个复选框，同时定义了表单提交时的处理函数。当提交表单时，表单数据将会输出到命令行窗口。如果表单输入不合法，将会在控制台输出错误信息。
总结
formsy-react-form-inputs 组件是一个非常实用的 npm 包，可以帮助我们轻松地完成表单的开发和验证。通过本文的介绍，我们已经掌握了它的基本使用和自定义验证器的方法，相信这些知识对于我们日常的前端开发会有很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e2581e8991b448dba80