前言
在前端开发中，表单验证是不可或缺的一部分。而，要手动编写表单验证会增加开发成本并且容易出错。因此，在开发过程中，我们通常会选择使用成熟的表单验证库来帮助我们简化这一步骤。
romagny13-react-form-validation 是一个 npm 包，它可以帮助我们快速实现表单验证。这篇文章就是针对这个包的使用教程。
安装
在终端中使用以下命令可以安装 npm 包：
--- - -------------------------------
使用
首先，我们需要在 react 组件中导入包并创建一个表单。在本例中，我们假设要验证一个登录表单，包含两个输入框：username 和 password。
------ ----- ---- --------
------ ------- ---- ----------------------------------
----- --------- - -- -- -
----- - ------------- ------------------ ------ - - ----------
----- ------ - -- -- -
-- ------
--
------ -
----- --------------------------------
-----
------ ------------------------------
------ ----------- --------------- ---------------------------- --
---------------- -- -------------------------------
------
-----
------ -----------------------------
------ --------------- --------------- ---------------------------- --
---------------- -- -------------------------------
------
------- -------------------------
-------
--
--
------ ------- ----------在表单中，我们使用了 useForm hook，它会返回一个包含 handleSubmit、handleInputChange 和 errors 的对象，分别用于处理表单提交、处理输入框改变和展示错误信息。
接下来，我们需要添加一些验证规则以及错误提示。我们可以通过传递一个验证函数来给每个输入框添加验证规则。例如，我们想要验证用户名是否为空：
------ ----- ---- --------
------ ------- ---- ----------------------------------
----- -------- - ------- -- ------ - --------- - -----------
----- --------- - -- -- -
----- - ------------- ------------------ ------ - - ----------
----- ------ - -- -- -
-- ------
--
------ -
----- --------------------------------
-----
------ ------------------------------
------
-----------
---------------
----------------------------
-------------------
--
---------------- -- -------------------------------
------
-----
------ -----------------------------
------ --------------- --------------- ---------------------------- --
---------------- -- -------------------------------
------
------- -------------------------
-------
--
--
------ ------- ----------这个例子中，我们定义了一个名为 required 的验证函数，如果输入框中的值为空，则返回一个错误提示。在 render 方法中，我们在 username 的 input 标签中添加了 validate 属性，并传递了 required 函数作为参数。这个属性告诉 useForm 这个输入框需要验证。
在 validate 函数中，如果验证失败，则需要返回一个错误提示。在 render 方法中，通过判断 errors 对象中的属性来决定是否展示错误提示。
我们还可以通过传递一个包含多个验证函数的数组来添加多个验证规则。例如，我们想要验证密码长度是否大于六位：
------ ----- ---- --------
------ ------- ---- ----------------------------------
----- -------- - ------- -- ------ - --------- - -----------
----- --------- - ------- --
----- -- ------------ - - - ------------ - ----------
----- --------- - -- -- -
----- - ------------- ------------------ ------ - - ----------
----- ------ - -- -- -
-- ------
--
------ -
----- --------------------------------
-----
------ ------------------------------
------
-----------
---------------
----------------------------
-------------------
--
---------------- -- -------------------------------
------
-----
------ -----------------------------
------
---------------
---------------
----------------------------
-------------------- -----------
--
---------------- -- -------------------------------
------
------- -------------------------
-------
--
--
------ ------- ----------总结
romagny13-react-form-validation 是一个非常方便的表单验证库，特别是在 react 项目中。通过本文的介绍，我们可以学习到如何快速地使用它。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005602a81e8991b448de5a1