随着web应用程序变得越来越复杂，表单验证也越来越重要。React+Redux是一个非常流行的前端技术组合，本文将介绍如何在React+Redux中实现单页应用中的表单验证。
为什么要进行表单验证？
在web应用程序中，表单是非常常见的元素。表单可以用于用户登录、用户注册、用户提交数据等场景。表单验证的目的是确保用户输入的数据符合预期的格式和要求。对于某些敏感性数据，表单验证也可以用于增强安全性。
React组件的表单验证
在React中，组件可以完成表单验证的功能。比如：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--------- --
--
------------------------- - -------------------------------------
------------------------- - -------------------------------------
----------------- - -----------------------------
-
--------------------------- -
------------------------ ---------------------
-
--------------------------- -
------------------------ ---------------------
-
------------------- -
-------- ---- --- ---------- - - ------------------- - - --------- - - ---------------------
-----------------------
-
-------- -
------ -
----- -----------------------------
-------
---------
------ ----------- --------------------------- ------------------------------------ --
--------
-------
---------
------ --------------- --------------------------- ------------------------------------ --
--------
------ ------------- -------------- --
-------
--
-
-上面的代码是一个登录表单组件，其中的handleSubmit方法是用于提交数据的。这里并没有对数据进行验证，因此用户可以输入任何内容。为了实现表单验证，我们需要在handleSubmit方法中添加逻辑来检查用户输入的数据是否符合要求。
Redux的作用
在React中，组件可以处理表单验证的功能，但是这种做法会导致组件的复杂性增加。Redux是一种状态管理库，可以帮助我们减少组件复杂度，使表单验证更加容易实现。
Redux的使用包括三个主要部分：
- Action，定义对数据的操作
- Reducer，根据Action更新State
- Store，将Reducer和State组合在一起
下面让我们看一下，如何使用Redux实现表单验证。
利用Redux来处理表单验证
- 定义Action
首先，我们要定义几个Action，用于更新表单的各个字段：
-- -------------------- ---- ------- ------ ----- ------------ - --------------- ------ ----- ------------ - --------------- ------ -------- --------------------- - ------ - ----- ------------- -------- -- - ------ -------- --------------------- - ------ - ----- ------------- -------- -- -
- 定义Reducer
接下来，我们需要定义Reducer，根据Action来更新State：
-- -------------------- ---- -------
------ - ------------- ------------ - ---- ------------
----- ------------ - -
--------- ---
--------- --
--
------ ------- -------- ------------------ - ------------- ------- -
------ ------------- -
---- -------------
------ -
---------
--------- ---------------
--
---- -------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
-在上面的代码中，我们定义了一个loginReducer函数，它根据是否进行了SET_USERNAME或SET_PASSWORD操作来更新State。
- 创建Store
最后，我们需要创建一个store，将reducer和state组合在一起：
import { createStore } from 'redux';
import loginReducer from './reducer';
const store = createStore(loginReducer);现在我们已经准备好了Redux组件，下一步让我们来看一下如何结合React组件实现表单验证。
- React + Redux表单验证的实现
为了实现表单验证，我们需要在表单提交时检查数据并进行验证。为此，我们可以在组件的handleSubmit方法中访问store的state，然后在适当的地方添加验证逻辑。
-- -------------------- ---- -------
------------------- -
-----------------------
----- - --------- -------- - - -----------------
-- ---------------- --- - -- --------------- --- -- -
-------------------
-------
-
-------- ---- --- ---------- ---------------
-在代码中，我们首先调用了event.preventDefault()，以避免表单的默认提交行为。接着我们通过store.getState()方法获取state中的username和password字段，然后检查它们是否为空。如果有一个字段为空，就显示一个警告提示。
完整代码示例
重构后的Login组件示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
----- ------------ - ---------------
----- ------------ - ---------------
-------- --------------------- -
------ - ----- ------------- -------- --
-
-------- --------------------- -
------ - ----- ------------- -------- --
-
----- ------------ - -
--------- ---
--------- ---
--
-------- ------------------ - ------------- ------- -
------ ------------- -
---- -------------
------ -
---------
--------- ----------------
--
---- -------------
------ -
---------
--------- ----------------
--
--------
------ ------
-
-
----- ----- - --------------------------
----- ----- ------- --------------- -
------------------ -
-------------
----------------- - -----------------------------
------------------------- - -------------------------------------
------------------------- - -------------------------------------
-
------------------- -
-----------------------
----- - --------- -------- - - -----------------
-- ---------------- --- - -- --------------- --- -- -
-------------------
-------
-
-------- ---- --- ---------- ---------------
-
--------------------------- -
------------------------------------------------
-
--------------------------- -
------------------------------------------------
-
-------- -
----- - --------- -------- - - -----------------
------ -
----- -----------------------------
-------
----
------
-----------
----------------
------------------------------------
--
--------
-------
---
------
---------------
----------------
------------------------------------
--
--------
------ ------------- ---------- --
-------
--
-
-
------ ------- ------结论
表单验证在web应用程序中是至关重要的。React组件可以很容易地处理表单验证的功能，但是它会导致组件的复杂性增加。Redux是一个状态管理库，可以用于管理与某个应用程序的状态有关的所有数据，它可以帮助我们完成表单验证的任务。在本文中，我们学习了如何利用React和Redux一起处理表单验证。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672064a32e7021665e020783