Formik 是一个前端表单管理库，可以帮助开发者更轻松地构建和验证表单。在 React 项目中，Formik 是非常流行的表单验证组件之一。本文将重点介绍如何在 React 项目中集成 Formik，并演示如何创建一个带有表单验证的基本表单应用。
安装和导入 Formik
安装 Formik 可以使用 npm 或 yarn，本文以 npm 为例：
npm install formik
在需要使用 Formik 的 React 组件中导入它：
import { Formik } from 'formik';创建一个带有表单验证的表单
首先，让我们创建一个简单的表单，该表单包含一个文本框和一个提交按钮。接下来，我们将使用 Formik 来添加表单验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ------ ------------ - ---- ---------
----- --------- - -- -- -
------ -
-----
--------- ---------
-------
---------------- ------ -- --
---------------- -- -
----- ------ - ---
-- --------------- -
------------ - -----------
- ---- -- -
--------------------------------------------------------------
- -
------------ - -------- ----- ---------
-
------ -------
--
------------------ - ------------- -- -- -
------------- -- -
---------------------------- ----- ----
---------------------
-- -----
--
-
--- ------------ -- -- -
------
------ ------------ ------------ --
------------- ------------ --------------- --
------- ------------- ------------------------
------
---------
-------
--
---------
------
--
--
------ ------- ----------让我们一步一步来看这个例子。Formik 是一个组件，我们将它放到 JSX 中的路由中。在 Formik 组件中，我们定义了以下三个参数：
initialValues接受一个对象，该对象包含表单初始值。在这里，我们只有一个email字段。validate用于验证表单。它接收values，即表单当前值的对象，并返回一个包含错误消息的对象。这里我们验证了email字段是否为空，并且是否符合电子邮件地址模式。onSubmit定义了表单的提交行为。在这里，我们使用alert显示表单提交的值，并在 400 毫秒后将isSubmitting选项设置为 false。
在 Formik 的 children 函数中，我们定义了表单的结构和输入元素的 type 和 name 属性，这些属性与 initialValues 中的键名相同。我们还使用 ErrorMessage 组件来显示验证错误消息。
集成 Yup
Formik 可以与各种验证库集成，但其中最流行的是 Yup。Yup 是一个 JavaScript 对象模式验证库，可以在前端和后端使用。在我们的上一个例子中，我们在 validate 函数中手动验证了电子邮件地址。现在，让我们使用 Yup 来验证表单。
npm install yup
在需要使用 Yup 的 React 组件中导入它：
import * as Yup from 'yup';
和之前一样，在 validate 函数中验证电子邮件地址。但是，这一次我们只需要定义数据模式，并让 Yup 来处理真正的验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ------ ------------ - ---- ---------
------ - -- --- ---- ------
----- -------------- - -- -- -
------ -
-----
-------------- ---------
-------
---------------- ------ -- --
------------------------------
------ ------------
--------------- ----- ---------
----------------------
---
------------------ - ------------- -- -- -
------------- -- -
---------------------------- ----- ----
---------------------
-- -----
--
-
--- ------------ -- -- -
------
------ ------------ ------------ --
------------- ------------ --------------- --
------- ------------- ------------------------
------
---------
-------
--
---------
------
--
--
------ ------- ---------------我们将现有的 validate 参数替换为 validationSchema，该参数接受一个 Yup 模式对象。在这里，我们定义了一个 email 字段，并将它传递给 Yup 验证器函数，Yup.string() 说明了此字段应该是一个字符串，.email() 确保它是一个有效的电子邮件地址，并且 .required() 确保它不为空。
结论
本文介绍了如何集成 Formik 表单验证组件，以及如果使用 Yup 验证库简化表单验证。在 React 项目中使用 Formik 和 Yup，不仅可以让表单更易于管理和验证，还可以提高用户体验和数据完整性。
示例代码可在 Code Sandbox 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eeb5996fbf960197281aaf