在前端开发中，表单验证是一个非常重要的功能。为了方便开发，我们可以使用一些第三方库来完成这个任务。joi-validation-strategy-browser 就是其中之一。
安装
首先，我们需要在项目中安装 joi-validation-strategy-browser：
npm install joi-validation-strategy-browser
基本用法
joi-validation-strategy-browser 提供了一个默认的验证策略，我们可以直接使用它来完成基本的表单验证。这个验证策略包含了一些基本的验证规则，比如必填、最小长度、最大长度等。
首先，我们需要引入 joi-validation-strategy-browser：
import ValidationStrategy from 'joi-validation-strategy-browser';
接下来，我们需要定义一个表单，以及这个表单需要验证的规则：
const schema = {
name: Joi.string().required(),
age: Joi.number().integer().required().min(18),
};这个 schema 定义了一个包含两个字段的表单：name 和 age。name 必填，age 也必填，必须是整数，并且不能小于 18。
接着，我们可以创建一个新的 ValidationStrategy 实例，将这个实例传递给 React 组件中的 props.validation：
-- -------------------- ---- -------
------ ------- ----- ------ ------- --------------- -
-------- -
------ -
-----
---------------
--------------- ---------------------
-
-- --------------
-------
--
-
-这样，我们在 React 组件中就可以直接调用 this.props.validation.validate() 来验证表单是否符合要求了：
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------ - ------- -- -
-----------------------
----- - ---------- - - -----------
----------------------------- ------ -- -- -
-- --------- -
-- ----
-
---
-
-------- -
------ -
----- -----------------------------
-- --------------
------- -------------------------
-------
--
-
-这样，如果表单验证不通过，errors 就会包含错误信息。如果验证通过，errors 就是 null。
自定义验证规则
除了使用 joi-validation-strategy-browser 提供的默认验证规则外，我们还可以自定义一些验证规则。这在一些需要特殊验证规则的项目中非常实用。
比如，我们想要自定义一个验证规则，确保两个字段的值相等，可以这样做：
-- -------------------- ---- -------
------ --- ---- ------
---------------- -- --
----- -------------
----- ----------
------ --
----- ----------
---------------- ------ ------ -------- -
----- ---------- - ---------------------
-- ------ --- ----------- -
------ ---------------------------------- -
-- ------
------ -----------
-- ------ ---------
-
------ ------
--
---
----这里我们使用了 Joi.extend() 方法来扩展 Joi 的验证规则，定义了一个 equalTo 规则。这个规则需要一个参数，表示需要比较的字段名。在验证的时候，我们获取到另一个字段的值，如果两个字段的值不相等，就抛出一个错误。
接下来，我们可以在 schema 中使用这个验证规则：
const schema = {
password: Joi.string().required(),
confirmPassword: Joi.string().required().equalTo('password'),
};这里我们使用了 equalTo 规则，将 confirmPassword 和 password 两个字段进行比较。
总结
joi-validation-strategy-browser 是一个能够帮助我们快速完成表单验证的工具。除了提供一些基本的验证规则外，我们还可以自定义一些特殊的验证规则。使用它可以让我们的前端开发更加高效和简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559d981e8991b448d75b3