介绍
formsy-react 是一个基于 React 的表单验证库，它可以使得表单验证的逻辑更加简便和高效。本文将会介绍如何使用 npm 包 formsy-react 来进行表单验证。
安装
首先，我们需要安装 formsy-react 和其依赖项：
npm install formsy-react formsy-react-components --save
表单组件
formsy-react 内置了一些常用的表单组件，包括：
- Form
- Input
- Textarea
- Checkbox
- RadioGroup
- Select
在下面的例子中，我们将会使用 Input 组件来展示 formsy-react 的表单验证功能。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ - ----- - ---- --------------------------
----- ------ ------- --------------- -
------------------ -
-------------
---------- - - ---------- ----- --
----------- - -----------------------
----------------- - -----------------------------
------------------ - ------------------------------
-
------------- -
-------------------
-
-------------- -
--------------- ---------- ---- ---
-
--------------- -
--------------- ---------- ----- ---
-
-------- -
------ -
----- --------------------------- --------------------------- -------------------------------
------ ------------ ------------- ------------ -------- --
------- ------------- ------------------------------------------------
-------
--
-
-在这个例子中，我们创建了一个 MyForm 组件，它包含一个 Input 组件和一个 submit 按钮。我们使用了 onValidSubmit、onValid 和 onInvalid 这三个属性来控制表单验证。
- onValidSubmit：当表单验证通过时，该属性指定的 submit 函数会被调用。
- onValid：当表单元素通过验证时，该属性指定的 enableButton 函数会被调用。
- onInvalid：当表单元素未通过验证时，该属性指定的 disableButton 函数会被调用。
表单验证
formsy-react 提供了许多内置的验证规则，比如：
- isEmail
- isNumeric
- isURL
除此之外，我们还可以自定义验证规则。下面是一个自定义验证规则的例子：
-- -------------------- ---- -------
------ ------ ---- ---------------
------ ----- ---- --------
------ - ----- - ---- --------------------------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------------- -- --
------------- - -------------------------
------------- - -------------------------
-
--------------- -
---------------------------
-
--------------- -
-- ------------- - --------------------- -
--------------- ------------- -------- ------ -- ------------------------ ---
------ ------
-
--------------- ------------- -- ---
------ -----
-
-------- -
------ -
-----
------ --------------- ----------- -- ------------------------------ --
----- -------- ------ ----- -----------------------------------
------
--
-
-
-------------------- - -
------- -----------------------
--
------ ------- --------------------在这个例子中，我们创建了一个名为 MyInput 的组件，它继承自 Input 组件。在该组件中，我们定义了一个 validate 函数来进行表单验证。如果输入的字符串长度小于 minLength 属性指定的长度，就会返回 false，并显示一个错误信息。
结论
formsy-react 提供了一种简单而强大的方法来进行表单验证。通过使用其内置的验证规则和自定义验证规则，我们可以轻松地实现表单验证功能。希望本文能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34164