在前端开发中，表单验证是一个常见的需求。Redux 是一个流行的状态管理库，它可以用来管理组件之间的状态。在 Redux 中处理表单验证有很多好处，例如可以将验证逻辑集中到 Redux 的 reducer 中，方便共享和重用。本文将介绍如何在 Redux 中处理表单验证。
表单验证的基本原理
表单验证的基本原理是对表单中的数据进行验证，判断其是否符合特定的规则。通常情况下，我们会在用户提交表单时进行验证，并给出相应的提示。
在 Redux 中，我们可以将表单数据存储在 Redux store 中，并在 reducer 中对其进行验证。如果表单数据不符合规则，可以将相应的错误信息存储在 Redux store 中，并在组件中进行显示。例如，我们可以将一个表单数据对象定义为如下格式：
{
username: '',
password: '',
email: '',
// ...
}在 reducer 中，我们可以定义一个验证函数，对表单数据进行验证。如果验证失败，我们可以修改 store 中的数据，例如：
-- -------------------- ---- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- -------------------- -
----- - ------ ----- - - ---------------
------ -
---------
-------- ------
--
-
---- ---------------- -
----- - -------- - - ---------------
--- ------ - ---
-- -------------------- -
--------------- - ----------
-
-- -------------------- -
--------------- - ---------
-
-- ---
------ -
---------
-------
--
-
-- ---
--------
------ ------
-
-在上面的代码中，我们定义了两个 action：UPDATE_FORM_FIELD 和 VALIDATE_FORM。UPDATE_FORM_FIELD 用于更新表单数据，VALIDATE_FORM 用于对表单数据进行验证。在 VALIDATE_FORM 中，我们对表单数据进行了基本的验证，如果验证失败，就将错误信息存储在 errors 字段中，然后将其存储到 Redux store 中。
在组件中，我们可以通过访问 Redux store 的 formData 和 errors 字段获取表单数据和错误信息，然后进行渲染。例如，我们可以将一个简单的登录表单组件定义为如下格式：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
-------- ----------- -
----- -------- - --------------
----- -------- - ----------------- -- ----------------
----- ------ - ----------------- -- --------------
----- ------------ - ------- -- -
-----------------------
---------- ----- ---------------- -------- - -------- - ---
-- ---
--
----- ------------ - ------- -- -
----- - ----- ----- - - -------------
---------- ----- -------------------- -------- - ------ ----- ----- - ---
--
------ -
----- ------------------------
-----
------ ------------------------------
------
-----------
-------------
---------------
-------------------------
-----------------------
--
---------------- -- -----------------------------
------
-----
------ -----------------------------
------
---------------
-------------
---------------
-------------------------
-----------------------
--
---------------- -- -----------------------------
------
------- -------------------------
-------
--
-在上面的代码中，我们使用了 useSelector 和 useDispatch React hooks 访问 Redux store 中的数据和 dispatch 函数。在 handleSubmit 中，我们先调用 VALIDATE_FORM action 进行表单验证，然后进行表单提交操作；在 handleChange 中，我们调用 UPDATE_FORM_FIELD action 更新表单数据。在渲染表单元素时，我们使用了 Redux store 中的 formData 和 errors 字段进行渲染，并根据 errors 是否存在展示错误提示信息。
表单验证的进阶处理
在实际的开发中，表单验证往往比上面的例子要复杂得多。例如，我们可能需要对表单数据进行异步验证（例如验证用户名是否已经存在于数据库中），或者需要对某些表单元素进行特定的验证规则。下面是一些处理表单验证的进阶技巧。
异步验证
异步验证是指对表单数据进行异步操作，并在异步操作完成后进行验证。例如，在验证用户名是否已经存在于数据库中时，我们通常需要进行异步操作。在 Redux 中，我们可以使用 Redux Thunk 或 Redux Saga 进行异步操作。
使用 Redux Thunk 进行异步操作的代码如下：
-- -------------------- ---- -------
-------- ------------------------------- -
------ ----- ---------- -- -
--- -
----- -------- - ----- --------------------------------------------------
----- ---- - ----- ----------------
-- --------------- -
----------
----- -----------------------
-------- - ------ ----------- ------ --------- --
---
-
- ----- ------- -
----------
----- -----------------------
-------- - ------ ----------- ------ ------ --
---
-
--
-在上面的代码中，我们定义了一个名为 asyncValidateUserName 的函数，它接受一个用户名作为参数，并返回一个 Redux Thunk。在 Thunk 中，我们使用 fetch API 发起一个异步请求，如果请求成功并且返回值表示用户名已经存在，我们就调用一个名为 VALIDATE_FORM_FAILED 的 action，将错误信息存储到 Redux store 中。
使用 Redux Saga 进行异步操作的代码如下：
-- -------------------- ---- -------
--------- --------------------------------- -
----- - -------- - - ---------------
--- -
----- -------- - ----- ----------- --------------------------------------------
----- ---- - ----- ----------------
-- --------------- -
----- -----
----- -----------------------
-------- - ------ ----------- ------ --------- --
---
-
- ----- ------- -
----- -----
----- -----------------------
-------- - ------ ----------- ------ ------ --
---
-
-
--------- ---------- -
----- ------------------------------------ ---------------------------
-在上面的代码中，我们定义了一个名为 asyncValidateUserNameSaga 的 Saga，它接受一个名为 ASYNC_VALIDATE_USERNAME 的 action，并在其中进行异步操作。在 Saga 中，我们使用 call Effect 调用 fetch API，并使用 put Effect 调用一个名为 VALIDATE_FORM_FAILED 的 action。
对某些表单元素进行特定的验证规则
在表单验证中，我们可能需要对某些表单元素进行特定的验证规则。例如，我们可能需要验证姓名，地址或者电话号码是否合法。在 Redux 中，我们可以使用 Validator.js 库进行验证。
使用 Validator.js 库进行验证的代码如下：
-- -------------------- ---- -------
----- --------- - ---------------------
-------- -------------------- -
------ -------------------------
-
-------- ----------------- - --- ------- -
------ ------------- -
---- ---------------- -
----- - -------- - - ---------------
--- ------ - ---
-- --------------------------------------- - ---- - --- -
--------------- - ---------- - -----
-
-- ---------------------------------------------- -- --- - ---------- - --- -
--------------- - --------- - ----------------------
-
-- -------------------------------- -
------------ - ----------
-
-- ---
------ -
---------
-------
--
-
-- ---
-
-在上面的代码中，我们通过 Validator.js 的 isLength 和 isStrongPassword 方法来验证用户名和密码的长度和强度，通过自定义的 validateEmail 方法来验证邮箱地址是否合法。
结论
在本文中，我们介绍了如何在 Redux 中处理表单验证，并给出了一些处理表单验证的进阶技巧。通过将表单数据和错误信息存储在 Redux store 中，并在组件中进行渲染，我们可以方便地管理和共享表单验证逻辑，增加代码的可重用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738271a317fbffedf0e8913