介绍
React 是一种广泛使用的前端框架，而在 React 中，表单是开发中不可避免的一个部分。而表单的验证是表单中不可或缺的一部分，而 react-form-validizr 就是一个专为 React 提供表单验证的 npm 包。
react-form-validizr 是一个轻量的表单验证库，其基于 react-hook-form，使用起来非常简单，而且支持多种类型的验证。下面本文将为大家详细介绍 react-form-validizr 的使用方法，以及包含示例代码。
安装
可以通过 npm 安装 react-form-validizr：
--- ------- ------------------- ------
示例
以下示例是一个短信验证码的表单验证，这个表单需要验证手机号码和验证码是否合法，使用 react-form-validizr 能够轻松实现这个表单验证功能。
首先，引入所需的包和 hook：
------ ------ - -------- - ---- -------- ------ - ------- - ---- ------------------ ------ - -------------------- ------------------------ - ---- ----------------------
然后，通过 hook 初始化表单，并定义表单的验证规则：
----- - --------- ------------- ------ - - ----------
----- ------------------------ - -
------- -
--------- - ------ ----- -------- -------- --
--------- - --------- -------------------- -------- ---------- --
--
----------------- -
--------- - ------ ----- -------- -------- --
--------- - --------- ------------------------- -------- ---------- --
--
--在这里，我们定义了两个表单项：mobile 和 verificationCode，同时也定义了每个表单项的验证规则。其中，validatePhoneNumber 和 validateVerificationCode 分别是一个自定义的验证函数，用于验证手机号和短信验证码。
最后，我们在表单中注册表单项，并渲染到页面上：
------ -
----- ----------------------------------
---- -----------------------
------ -----------------------------
------
----------
------------------------
-------------
--------------------
-----------------------------------------------
--
-------------- -- ---- ---------------- --------------------------------------------
------
---- -----------------------
------ --------------------------------------
------
-----------
------------------------
-----------------------
--------------------
---------------------------------------------------------
--
------------------------ -- -
---- ---------------- -----------------------------------------------------
--
------
------- ------------- -------------- ----------- -----------
--
---------
-------
--在代码中，我们可以看到表单项中的 ref 使用了规则中的验证规则，而表单项的错误信息则是使用了 errors 对象中的信息，通过对它们的判断来展示错误信息。
结论
通过 react-form-validizr，我们可以非常方便的实现表单验证功能，并且将其封装成一个单独的 npm 包。通过上述的示例代码，相信大家已经能够掌握 react-form-validizr 的使用方法，如果有更多的问题，可以参考 npm 官网的文档，获取更多的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f7a238a385564ab69bc