在前端工程化中，npm 包是重要的工具，它们可以方便地完成日常开发工作。在本文中，我们将介绍如何使用 @iguazu/yaguar 这个 npm 包来实现前端开发中常见的表单验证功能。
什么是 @iguazu/yaguar
@iguazu/yaguar 是一个基于 yup 和 react-hook-form 的表单验证库。
在使用表单验证时，我们通常需要定义一个 schema 来描述表单字段的校验规则，然后将 schema 与表单库进行绑定。@iguazu/yaguar 实现了将 schema 与 react-hook-form 进行集成，使得我们可以非常便捷地完成表单验证。
安装 @iguazu/yaguar
在开始使用 @iguazu/yaguar 之前，我们需要将其安装到我们的项目中。打开终端，切到你的项目目录下，然后执行以下命令：
--- ------- --------------
安装完成后，我们需要在项目中引入 @iguazu/yaguar 和 react-hook-form 的相关依赖。
------ - ------- - ---- ------------------ ------ -------------- ---- -----------------
使用 @iguazu/yaguar
在引入了 @iguazu/yaguar 和 react-hook-form 之后，我们就可以开始使用它们了。
定义校验规则
首先，我们需要定义一个校验规则的 schema。这个 schema 需要使用 yup 语法来描述校验规则，例如：
------ - -- --- ---- ------
----- ------ - ------------
--------- ------------
--------------------
------- ---------- - ---
-------- ---------- -- ----
--------- ------------
-------------------
------- --------- - ---
-------- --------- -- ----
---------------- ------------
---------------------
---------------------------- ------ -------------
---在上面的代码中，我们定义了一个对象，对象的属性是表单中的字段，其对应的值是一个 yup 的 schema，用来描述该字段的校验规则。例如上面的代码定义了三个字段：username、password 和 confirmPassword。其中，每个字段都需要满足不同的校验规则。
使用校验规则
接下来，我们需要将校验规则与 react-hook-form 进行绑定，以实现表单验证功能。实现方法如下：
------ - ------- - ---- ------------------
------ -------------- ---- -----------------
----- ------ - --- -- ----- ------
-------- -------- -
----- -
---------
-------------
---------- - ------- ------- --
- - --------- --------- ---------------------- ---
----- -------- - ------ -- ------------------
------ -
----- ----------------------------------
------ ------------------------- --
---------------- -- ---------------------------------
------ ------------------------- --
---------------- -- ---------------------------------
------ -------------------------------- --
----------------------- -- ----------------------------------------
------- ------------- --------------------
--
---------
-------
--
-上面的代码中，我们首先调用了 react-hook-form 中的 useForm 函数，并将 validateSchema(schema) 作为 resolver 参数传递进去。这里的 validateSchema 函数就是 @iguazu/yaguar 包中提供的方法。
当表单数据提交时，react-hook-form 会根据我们定义的校验规则进行校验，并返回校验结果。我们可以通过解构 formState 中的 errors 和 isValid 属性，来获取校验结果和表单是否合法的状态。此外，我们还可以通过 register 函数将表单中的字段与 react-hook-form 进行绑定。
最后，我们将 handleSubmit 和 onSubmit 作为 form 元素的 onSubmit 属性和 button 元素的 disabled 属性进行绑定，以完成表单提交和禁用提交按钮的功能。
总结
@iguazu/yaguar 是一个非常方便的表单验证库，它将校验规则与 react-hook-form 进行集成，使得我们可以非常方便地完成表单验证工作。
在使用 @iguazu/yaguar 时，我们需要先定义一个校验规则的 schema，然后将其与 react-hook-form 进行绑定。这样，在表单提交时，我们就可以通过解构 formState 中的 errors 和 isValid 属性，来获取校验结果和表单合法状态。
希望本文可以帮助你更好地使用 @iguazu/yaguar，实现你的表单验证功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/197605