在前端开发中，表单验证是非常常见的需求，同时也是一个比较繁琐的任务。React 的状态管理机制使得表单验证可以更为方便和简单，同时还可以通过优化来提升用户体验。接下来将详细介绍 React 中如何进行表单验证及优化。
表单验证
常规表单验证
对于常规表单验证，可以通过 React 的 state 和 setState 来管理表单数据和验证状态。具体实现如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
------ ---
--------- ---
---------- ---
----------- ---
-------------- --
--
-
------------ - ----- -- -
-----------------------
----- ------- - ----------------
-- --------- -
------------------------
-
--
------------ - ----- -- -
--------------- -------------------- ------------------ ---
--
-------- - -- -- -
--- --------- - ---
--- ---------- - ---
--- ------------- - ---
-- ------------------ -
--------- - ----- -- ----------
-
-- --------------------------------- -
---------- - -------- -------
-
-- --------------------------- - -- -
------------- - --------- ---- -- -- ----- - ------------
-
-- ----------- -- --------- -- -------------- -
--------------- ----------- ---------- ------------- ---
------ ------
-
------ -----
--
-------- -
------ -
----- -----------------------------
-----
--------------------
------ ----------- ----------- ---------------------------- --
---------------------------------
------
-----
---------------------
------ ----------- ------------ ---------------------------- --
----------------------------------
------
-----
------------------------
------ --------------- --------------- ---------------------------- --
-------------------------------------
------
------- -----------------------------
-------
--
-
-
------ ------- -----在该例子中，我们使用了 state 来管理表单数据和验证状态，同时使用 validate 函数验证表单数据。通过 handleChange 函数，每当表单内容变化时，我们调用 setState 来更新 state 中的对应数据。在 handleSubmit 函数中，我们通过 validate 函数来判断表单数据是否符合要求，如果符合要求，则向服务器提交表单数据。
在 validate 函数中，我们对表单数据进行了校验。如果校验不通过，则通过 setState 设置相应的错误信息，并返回 false。反之，则返回 true。
表单验证插件
对于大型表单或者更加复杂的验证规则，手动编写表单验证逻辑可能会比较繁琐。在此情况下，我们可以选择使用一些表单验证插件，如 Formik、React Hook Form 等。这些插件可以帮助我们更加便捷地处理表单验证的逻辑。以 Formik 为例，我们可以参考以下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ------ ------------ - ---- ---------
------ - -- --- ---- ------
----- ------------ - --------------------
----- ----------------------------------
------ --------------------------- -----------------------------
--------- ------------------- --------- ---- -- -- ----- - ---------------------------------
---
----- --- - -- -- -
-----
---------------
-------
----------------
----- ---
------ ---
--------- --
--
-------------------------------
---------------- -- -
--------------------
--
-
--- ------- ------- -- -- -
------
-----
--------------------
------ ----------- --
------------- ----------- --
------
-----
---------------------
------ ------------ ------------ --
------------- ------------ --
------
-----
------------------------
------ --------------- --------------- --
------------- --------------- --
------
------- -----------------------------
-------
--
---------
------
--
------ ------- ----在上述示例代码中，我们使用了 Formik 插件来处理表单验证逻辑。首先，我们定义了一个 SignupSchema，该变量指定了表单验证的规则。然后，在 <Formik> 组件中，我们设置了表单的 initialValues 和 validationSchema，并指定了 onSubmit 回调函数。
在组件内部，我们使用了 <Field> 组件来处理表单输入，通过 name 属性指定了对应的数据名。同时，在每个输入框下方，我们使用了 <ErrorMessage> 组件来渲染错误信息。
更多 Formik 的使用方法可以参考官方文档。
表单优化
在进行表单优化时，我们可以考虑以下几个方面：
Lazy Validation
在使用表单验证插件时，一些插件会自动做一些表单数据的校验，这可能会对页面的性能产生一定的影响。这时，我们可以考虑使用懒校验（Lazy Validation）来提升性能。
懒校验即在用户提交表单时再进行校验。在这种方式下，我们需要将表单的 onSubmit 回调函数修改为以下形式：
onSubmit={async (values, { setSubmitting }) => {
await new Promise(resolve => setTimeout(resolve, 500));
console.log(values);
setSubmitting(false);
}}其中，我们使用了 setSubmitting 函数来通知插件表单正在提交，防止用户多次点击提交按钮。在此同时，我们通过 await new Promise(resolve => setTimeout(resolve, 500)) 函数延迟了表单提交，这样可以给用户更多的暂停时间来检查输入的内容。同时，使用 async/await 可以更便捷地处理表单提交之后的逻辑。更多关于 Formik 的懒校验可以参考官方文档。
交互反馈
在表单验证时，我们可以考虑给用户提供一些更加友好的交互反馈。比如，在用户提交表单之后，给出一些 loading 状态的提示，防止用户重复提交；在用户输入错误时，给出提示信息等。
我们可以使用一些 UI 库来渲染这些交互反馈。比如 Ant Design、Material UI 等。以 Ant Design 为例，我们可以使用 Spin 和 message 组件来渲染状态提示信息：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- ------ ------------ - ---- ---------
------ - -- --- ---- ------
------ - ----- ------- - ---- -------
----- ------------ - --------------------
----- ----------------------------------
------ --------------------------- -----------------------------
--------- ------------------- --------- ---- -- -- ----- - ---------------------------------
---
----- --- - -- -- -
-----
---------------
-------
----------------
----- ---
------ ---
--------- --
--
-------------------------------
--------------- -------- - ------------- -- -- -
----- --- --------------- -- ------------------- ------
--------------------
---------------------
----------------------- -----------
--
-
--- ------------- ------- ------- -- -- -
------
----- ------------------------
-----
--------------------
------ ----------- --
------------- ----------- --
------
-----
---------------------
------ ------------ ------------ --
------------- ------------ --
------
-----
------------------------
------ --------------- --------------- --
------------- --------------- --
------
------- ------------- ------------------------
------
---------
-------
-------
--
---------
------
--
------ ------- ----在上述示例代码中，我们使用了 Ant Design 的 Spin 组件来渲染 isSubmitting 状态，同时使用了 message 组件来渲染提交成功的信息。
总结
在本文中，我们介绍了 React 中的表单验证和优化，并提供了详细的示例代码。通过本文的学习，读者可以更加灵活地处理表单验证和优化问题，为用户带来更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a6766948841e9894315dd8