在前端开发中，数据的有效性验证是至关重要的。Redux是一个非常流行的状态管理库，而redux-validator就是一个专门用于验证Redux中的数据有效性的npm包。在本文中，我们将详细介绍redux-validator，包括如何使用它来验证数据、如何编写自定义验证器和示例代码的实现过程。
安装和配置
首先，您需要安装redux-validator，使用npm命令进行安装，如下所示：
npm install redux-validator --save
接下来，您需要在Redux store中配置redux-validator。在store中添加composeWithValidator函数，并使用applyMiddleware包装您的中间件，如下所示：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ - -------------------- - ---- ------------------
------ ----------- ---- -------------
------ - ----------------- - ---- ---------------
----- ----- - ------------
------------
---------------------
--------------------
-------------------------------
--
------------------
--
--上面的代码是一个典型的Redux store的配置方式。其中，myCustomValidator是自定义的验证器。我们将在接下来的部分中详细介绍如何编写自定义验证器。
使用Redux-Validator
在Redux-Validator中，我们使用rules配置验证规则对象。规则对象包括可以包含多种验证器和属性，如下所示：
-- -------------------- ---- -------
-
----- -
--------- -----
------- -
-------- --
--
--
------ -
--------- -----
------ -----
--
---- -
--------- -----
------------- -
------------ -----
------------ --
------------------ ----
--
--
-上述代码中，我们定义了一个包含三个属性（name、email和age）的规则对象。每个属性都可以包括多种验证器。例如，name属性包含presence验证器和length验证器。presence验证器用于验证属性是否存在，并且length验证器用于验证字符串的长度是否符合要求。
你可以通过调用validator函数来验证你的Redux state是否符合你的验证规则。
import { validate } from 'redux-validator';
const errors = validate(reduxState, rules);如果验证成功，errors将会是一个空对象。否则，它会包含包含所有验证错误对象的有序字段。
{
name: 'Name is too short (minimum is 5 characters)',
email: 'Email is invalid',
age: 'Age must be greater than 0 and less than or equal to 150',
}编写自定义验证器
通过编写自定义验证器，您可以为redux-validator添加新的验证规则。每个验证器都是一个函数，该函数接受value和options作为参数，并返回要么undefined，要么一个错误字符串。下面是一个简单的范例：
-- -------------------- ---- -------
-------- --------------------- -------- -
-- ------- ----- --- --------- -
------ ----------
-
----- --------- - -----------------
-- ------------ -
------ ------------------- ------ ------- -- ----- --- --------
-
------ ----------
-上述代码中，containsNumber是一个自定义验证器，用于检查字符串是否包含数字。如果字符串包含数字，则返回undefined。否则，它将返回一个错误对象。
您可以将自定义验证器添加到validator函数规则对象中，如下所示：
const rules = {
password: {
containsNumber: {
message: 'Password',
},
},
};在上面的规则对象中，我们使用containsNumber规则进行密码验证。在该规则的options对象中，我们将message属性设置为Password。如果密码不包含任何数字，则将返回具有自定义消息Pagination 的错误对象。
示例代码
下面是一个具有验证器的完整Redux state:
-- -------------------- ---- -------
-
----- -
----- ----- -----
------ -----------------------
---- ---
--------- --------------
--
------- -
----- -
----- ----- -- --- ----- -------- -- - -------------
------ ------ -- ---------
--------- --------- ------ ------- -- ----- --- --------
--
--
-下面是将验证规则与Redux store连接起来的代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- ------------------
------ - -------------- - ---- ------------
----- ------ - -- ----- ------- --------- -------- -- -- -
------
------ ----------- ----------- ----------------- ------------------- --
------------- -- ---------------------
------ ----------- ------------ ------------------ ------------------- --
-------------- -- ----------------------
------ ------------- ---------- ---------------- ------------------- --
------------ -- --------------------
------ --------------- --------------- --------------------- ------------------- --
----------------- -- -------------------------
------- ------------- ------------------------------------ - -- -------------------
------
---------
-------
--
----- --------------- - ----- -- --
----- -----------
------- ------------------
---
----- ------------------ - -
--------- ----- -- --------------------------------- --------------------
--------- ----- -- -
-----------------------
----- ------ - -------------- -------
-- --------- -
----------------- ------------
-
--
--
------ ------- ------------------------ ----------------------------上面的表单组件MyForm具有四个输入字段和一个提交按钮。当您更改任何字段时，我们会触发一个onChange回调，这将向Redux store中的user属性添加field/value对。同时，我们还将添加一个onClick回调，用于验证表单输入并阻止表单提交（如果存在错误的话）。
结论
在本文中，我们详细介绍了Redux-validator，包括如何安装和配置、如何使用它来验证数据、如何编写自定义验证器以及包含示例代码的实现过程。通过使用redux-validator，您可以轻松验证您的Redux数据是否有效，以便于确保您的应用程序的安全性和完整性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067012e361a36e0bce8da7