在 React 前端开发中，表单验证是一个非常重要的环节。而 react-validatorjs-strategy 是一个基于 Validator.js 的表单验证库，可以帮助我们轻松地实现表单验证功能。本文将详细介绍如何使用该库，包括安装、引入、基础使用和高级使用等。
安装
react-validatorjs-strategy 可以通过 npm 安装，打开终端，进入项目文件夹，输入以下命令进行安装。
npm install react-validatorjs-strategy --save
安装完成后即可引入使用。
引入
在组件中，我们可以使用 import 引入 react-validatorjs-strategy 包。
import Validator from 'validatorjs';
import { ValidatorForm, TextValidator, SelectValidator } from 'react-validatorjs-strategy';基础使用
我们可以创建一个用于登录的示例表单，包括用户名和密码两个输入框。以下是代码示例。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- --------------
------ - -------------- ------------- - ---- -----------------------------
----- --------- ------- --------- -
----- - -
--------- -
--------- ---
--------- ---
--
--
------------ - ------- -- -
----- - -------- - - -----------
--------------------------- - -------------------
--------------- -------- ---
--
------------ - ------- -- -
-----------------------
----- - -------- - - -----------
----------------------
--
-------- -
----- - -------- - - -----------
------ -
-------------- -----------------------------
-----
------ -------------------------------
--------------
---------------
-------------------------
----------------------------
------------------------ -------------------- ----------------------
----------------
--------- ---------
---------------- ------ - -----
---------------- -------- -- -----
--
--
------
-----
------ ------------------------------
--------------
---------------
---------------
-------------------------
----------------------------
------------------------ ---------------------
----------------
--------- --------
---------------- ------ - -----
--
--
------
------- -------------------------
----------------
--
-
-
------ ------- ----------在上述代码中，我们创建了一个 LoginForm 组件，在 state 中定义了 formData 对象，包括 username 和 password 两个属性。在 handleSubmit 函数中，我们可以获取到表单数据。而 handleChange 函数则是当输入框的内容发生变化时会触发的函数。
在 jsx 中，我们可以使用 ValidatorForm 这个高阶组件包裹表单元素，从而可以通过 onSubmit 函数来处理表单提交事件。对于每个输入框，我们可以使用 TextValidator 来进行验证。其中，name、value、onChange 等属性被视为通用属性，而 validators 和 errorMessages 属性则是 Validator.js 提供的验证属性。
通过这段代码，我们已经实现了一个简单的表单。
高级使用
react-validatorjs-strategy 还提供了很多高级功能，例如自定义消息和规则、异步验证、跨表单验证等。以下是 react-validatorjs-strategy 高级使用的示例代码。
自定义消息
我们可以在 errorMessages 对象中添加自定义消息，对于特定的验证结果输出自定义的消息文本，例如：
-- -------------------- ---- -------
--------------
---------------
-------------------------
----------------------------
------------------------ -------------------- ----------------------
----------------
--------- ---------
---------------- ------- - -----
---------------- -------- -- -----
--
--在上述代码中，我们定义了 required、minStringLength 和 maxStringLength 三种验证规则。而对于这三种规则，我们都可以自定义相对应的消息文本。
自定义规则
在使用 react-validatorjs-strategy 的过程中，我们可以创建我们自己的验证规则。以下是示例代码：
-- -------------------- ---- ------- ------------------------------- ------- -- - ----- ------- - ------------------------ ------ -------------------- -- ---------------- -------------- ---------------- -------------------------- ---------------------------- -------------------------- ---------------- ---------- -------------- -- --
在上述代码中，我们通过 Validator.register 函数来创建一个新的验证规则，该规则用于判断电话号码是否为标准的固定电话格式。注意，第三个参数为该规则的默认错误消息。而在使用该规则的时候，我们可以直接在 validators 属性中使用即可，无需再像之前的代码那样单独设置错误消息。
异步验证
react-validatorjs-strategy 还支持异步验证功能，可以通过 asyncValidators 属性进行配置。以下是代码示例：
-- -------------------- ---- -------
------ - ---- ---------
----- -------- ----------------------- -
------ --- ----------------- -- -
------------- -- -
----- ------- - -------------- - -----
------------------
-- --------
---
-
--------------
---------------
-------------------------
----------------------------
------------------------ -------------------- ----------------------
------------------ ------------- --
----------------
--------- ---------
---------------- ------- - -----
---------------- -------- -- -----
-------------- ----------
--
--在上述代码中，我们定义了一个名为 checkUsername 的异步验证函数，在组件中通过 async function... await 的语法来等待其验证结果。而 validators 和 errorMessages 属性则保持不变。不过需要注意的是，为了减少异步验证的请求次数，我们在 checkUsername 函数中加入了 _.debounce 函数，该函数会将异步验证函数进行防抖处理，防止用户的频繁请求。
跨表单验证
当我们需要同时验证多个表单时，react-validatorjs-strategy 也可以帮助我们实现。以下是示例代码：
-- -------------------- ---- -------
----- ----------------- - --- ---------------
------------- ------------ ---------------------
-------------------------- -----------------------------
-- -
------------------------ ---------
------------------------------- ------ - -----
------------------------------------- -----------
--------------------------------- ---------------
---
----- ----------------- ------- --------- -
----- - -
--------- -
------------- ---
-------------------------- ---
--
--
------------ - ------- -- -
----- - -------- - - -----------
--------------------------- - -------------------
--------------- -------- ---
--
------------ - ------- -- -
-----------------------
----- - -------- - - -----------
----------------------
--
-------- -
----- - -------- - - -----------
------ -
-------------- -----------------------------
-----
------ -----------------------------------
--------------
-------------------
---------------
-----------------------------
----------------------------
------------------------ ---------------------
----------------
--------- ---------
---------------- ------- - -----
--
--
------
-----
------ --------------------------------------------------
--------------
--------------------------------
---------------
------------------------------------------
----------------------------
------------------------ ---------------------------------
----------------
--------- -----------
----- ---------------
--
--
------
------- -------------------------
----------------
--
-
-
------ ------- ---------------------------------------------在上述代码中，我们创建了两个输入框：new_password 和 new_password_confirmation。而对于这两个输入框，我们创建了一个新的验证规则 passwordValidator。在 jsx 中，我们则可以通过调用该规则的 forForm 函数，将该规则应用到 ResetPasswordForm 组件中。
在这个例子中，我们主要使用了 ValidatorForm 的配置项。在 passwordValidator 中，我们定义了 new_password 和 new_password_confirmation 两个字段的验证规则，需要分别设置 required、minStringLength 和 same 三个验证规则。而在 validators 和 errorMessages 对象中则分别设置了各自的验证规则和错误消息。
通过在 jsx 中调用 ValidatorForm 这个高阶组件，并将其应用到 ResetPasswordForm 组件中的每个表单元素上，我们就能够实现多表单验证的功能。
结论
通过上述的使用教程，我们可以看到，react-validatorjs-strategy 是一个非常实用且功能强大的表单验证库。它包括了基础验证、自定义验证、异步验证和多表单验证等多种功能，可以适用于各种不同场景的表单验证需求之下。对于有需要的开发者来说，这个库是一个必不可少的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/205152