在一个交互式的网页应用程序中，表单是用户交互的重要捷径。表单通过收集用户提供的配置信息来控制应用程序的行为。在 React 中，表单是一种神奇的构造。因为 React 是一个基于组件的库，所以可以轻松地将表单拆分为子组件。这样做的好处是可以简化代码，并且使更改和调试变得更加容易。
表单验证是确保表单中输入数据的正确性和完整性的过程。当我们讨论表单验证时，最常见的表单验证是客户端表单验证。客户端表单验证是在表单数据提交到服务器之前使用 JavaScript 在客户端上进行的验证。
在本文中，我们将学习如何在 React 中实现表单验证。
必要性
表单验证是非常重要的，对用户以及应用程序来说都是必要的。如果没有表单验证，应用程序将不再安全。仅使用客户端表单验证是不够的，服务器端也需要验证数据。
客户端验证约束很容易在开发中添加，但容易被绕过。如果数据通过编写的客户端验证函数，则不一定是有效和安全的。因此，我们应该始终在服务器端应用程序中进行数据检查。
React 中的表单验证
React 提供了很多有用的工具来促进表单验证。当然，表单验证可以用类似于传统 HTML 表单的方法来处理。通过在表单上添加属性和验证函数，我们可以手动验证表单数据。
然而，在 React 中，我们可以使用 Formik 库来处理表单验证，这使得表单验证变得更加轻松。使用 Formik 不需要编写很多重复的代码，并且可以与其他 React 应用程序集成。
下面是一个使用 Formik 实现表单验证的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- ------ ----- ------------ - ---- ---------
----- ------------- - ------- -- -
--- ------
-- -------- -
----- - -----------
- ---- -- -
-------------------------------------------------------
- -
----- - ------------
-
------ ------
--
----- ---------------- - ------- -- -
--- ------
-- -------- -
----- - ---------
- ---- -- ------------- - -- -
----- - -------- - ------
-
------ ------
--
----- ---------------------- - ------- ------- -- -
--- ------
-- -------- -
----- - ------------
- ---- -- ------ --- ---------------- -
----- - --------------------
-
------ ------
--
----- --- - -- -- -
-------
---------------- ------ --- --------- --- --------------- -- --
------------------ -- -
--------------------
--
-
--- ------- ------- -- -- -
------
-----
------ -------------------------------
------ ------------ ------------ ------------------------ --
------------- ------------ --------------- --
------
-----
------ ------------------------------
------ --------------- --------------- --------------------------- --
------------- --------------- --------------- --
------
-----
------ --------------------------------------
------
---------------
---------------------
----------------- -- ----------------------------- --------
--
------------- --------------------- --------------- --
------
------- -------------------------
-------
--
---------
--
-------------------- --- ---------------------------------在此示例中，我们使用了 Formik 和 Yup 库，以及 Field 和 ErrorMessage 组件。我们定义了三个验证功能(validateEmail, validatePassword, validateRepeatPassword)，以确保我们的表单数据具有正确格式。我们将这些功能传递给每个字段的 validate 属性。
当表单提交时，我们使用 onSubmit 函数来处理我们的数据。如果表单数据无效，我们将收集的错误传递给客户端。
结论
表单验证是任何交互式网页应用程序中的不可或缺的部分，React 使它易于实现和维护。使用 Formik 和 Yup 等库可以使 React 表单验证更加容易和灵活。在实施表单验证时，我们必须始终牢记客户端验证不足以验证数据的完整性和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cc3939babaf620fb25ddb