前言
前端工程师在日常的开发中，经常需要对用户输入做校验。Joi是一款用于校验 JavaScript 对象的包裹器。而 @marudor/react-joi-validation 是一个基于 React 的轮子，通过封装 Joi，可以在 React 中轻松进行输入校验。
本文将为大家介绍如何使用 @marudor/react-joi-validation 进行输入校验，并提供详细的代码示例。
安装
要使用 @marudor/react-joi-validation，需要先安装 Joi。在安装 Joi 之后，可以通过以下命令安装 @marudor/react-joi-validation：
--- ------- -----------------------------
或者，您也可以使用 yarn：
---- --- -----------------------------
使用教程
基本用法
使用 @marudor/react-joi-validation 只需要两步：定义 schema，使用 Validation 组件。
首先，需要定义一个 Joi schema。schema 是用来描述校验规则的数据结构。例如，下面是一个校验 email 的 schema：
------ --- ---- ------ ----- ------ - ------------ ------ -------------------------------- ---
接着，在 React 组件中使用 Validation 组件。Validation 组件是用来设置 schema 和校验 React 组件输入的值，例如：
------ ------ - -------- - ---- --------
------ - ---------- - ---- --------------------------------
----- --- - -- -- -
----- ------- --------- - -------------
----- ------------ - ------- -- -----------------------------
------ -
-----
--------- -------
------
------ ------------------------------
------ ----------- ---------- ------------- ----------------------- --
----------- --------------- -------- ----- -- ----------------
--- ------ -- -- --------------------------------------
-------------
-------
------
--
--上面的例子中，我们使用 Validation 组件将 schema 绑定到了值为 { email } 的对象上。在 value={{ email }} 中，我们使用了 ES6 的语法。这里 { email } 等价于 { email: email }。
debounce 是用来设置延迟校验的毫秒数。在用户输入时，校验是有一定开销的，设置 debounce 为 1000 和 debounce 为 0，性能表现是截然不同的。
接着，在 Validation 组件内，我们可以根据校验结果，返回不同的 JSX。在上面的例子中，我们返回了 errors?.email?.message。如果 email 输入不合法，则返回 email 的错误信息；否则，返回 undefined。
整合表单库
在实际的业务中，我们经常使用一些现成的表单库，例如 Formik 和 Redux Form。这些表单库封装了一些表单数据的处理逻辑（例如优雅地处理表单的初始值以及提交逻辑），通过对表单库进行整合，我们可以使用 @marudor/react-joi-validation，对表单做校验。
接下来，我们将以 Formik 为例，介绍如何整合 @marudor/react-joi-validation。
首先在表单的顶层加入 ValidationProvider 组件：
------ - ------------------ - ---- --------------------------------
----- --- - -- -- -
-----
---------- -------
-------
---------------- ------ -- --
------------------ -- ----------------- ---------- ------------------------ ----- ------
-
--- ------- ------------ -- -- -
------------------- ----------------
------
------ ------------------------------
------ ----------- ------------ --
---------------- ----------------- --
------- -----------------------------
-------
---------------------
--
---------
------
--在 Formik 组件内，我们使用了 Formik 的一些 API，例如 Field 和 ValidationError。这些 API 与 @marudor/react-joi-validation 的 API 并不冲突，可以放心使用。
在 ValidationProvider 中，我们设置了 debounce 时间为 1000。由于 ValidationProvider 是对整个子树进行校验，所以设置 debounce 将会对子组件的校验结果产生影响。如果希望在子组件中自定义 debounce，可以在子组件的 Validation 组件中加入 debounce 属性。
接下来，我们需要定义一个 Joi schema：
------ --- ---- ------ ----- ------ - ------------ ------ -------------------------------- ---
这跟之前的例子相同。我们需要将上面的 schema，与 Formik 的表单初始值绑定：
------ - ------------------ - ---- --------------------------------
----- --- - -- -- -
-----
---------- -------
-------
---------------- ------ -- --
------------------ -- ----------------- ---------- ------------------------ ----- ------
-
--- ------- ------------ -- -- -
------------------- ----------------
------
------ ------------------------------
------ ----------- ------------ ----------------------- -------------------- --
---------------- ----------------- --
------- -----------------------------
-------
----------- --------------- -------------- ---------------
--- ------ -- -- -
-- ----------------------------------- -- ------- -
------ -----------------
-
------ -----
--
-------------
---------------------
--
---------
------
--上面的例子中，我们给 Field 组件加入了 onChange 和 value，用来绑定 Formik 表单的值。接着，我们使用 Validation 组件，在 ValidationProvider 内部，将 schema 绑定到了 Formik 的表单值上。
最后，在 Validation 组件内部，我们可以根据校验结果，返回不同的 JSX。如果存在错误，则返回一个提示信息。
结语
@marudor/react-joi-validation 是一个简单而灵活的输入校验库，适用于 React 生态中的各种输入场景。本文提供了详细的使用教程和代码示例，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055eaa81e8991b448dc17b