在前端开发中，表单验证是必不可少的一部分。现有的解决方案有非常多的种类，其中同样也涉及到很多 npm 包。其中，react-form-validation-render-props 是一款非常实用的表单验证 npm 包。接下来，我们将深入探讨如何使用它。
安装 react-form-validation-render-props
在使用这个 npm 包前，我们需要先进行安装。
npm install react-form-validation-render-props --save
基本概念
在了解这个包之前，我们需要了解一些基本概念。
Validator
Validator 是验证器的意思，用于对表单数据进行验证。它们是在 React 组件中定义和使用的。
ValidatedInput
ValidatedInput 是验证过的表单组件，可以用在需要验证的表单输入框中。
ValidationModel
ValidationModel 存储了所有可验证字段的信息，这些字段与我们的表单交互并在表单提交时进行验证。
ValidationProvider
ValidationProvider 是一个 React 组件，可以将 ValidationModel 传递到每个需要验证的 ValidatedInput 组件中。
FormValidator
FormValidator 收集和验证所有 ValidatedInput 组件的数据，并在表单提交时进行验证。
FormValidationProvider
FormValidationProvider 是一个 React 组件，可以将 FormValidator 传递到表单组件中。
示例
在了解了这些概念后，我们来看一个示例，以帮助理解这些概念。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ---------------- --------------- ------------------- ---------------------- - ---- -------------------------------------
----- ----------- ------- --------------- -
------------------ -
-------------
-------------------- - --- -----------------
------ --- -----------
--------- ----- -- ----------------- -- ------------------
------------- ------ -- ----------
---
---
------------------ - -------------------------------
------
-- -- --
------ ------------
------- -
------ -------------
--
----
-
-------- - --- -- -
-------------------
-- ---------------------------- -
---------------- ---- -- ----- --- --- -- ------------
- ---- -
---------------- ---- -- --- --------
-
-
-------- -
----- - ----- - - --------------------------------
------ -
----------------------- -------------------------------
----- -------------------------
----------- ---------
------------------- ---------------------------------
-----
------ -----------------------------
---------------
------------
-----------
------------------ ---- ------
-----------------
--
------
---------------------
------- -----------------------------
-------
-------------------------
--
-
-
------ ------- ------------在这个示例中，我们创建了一个表单，其中只有一个 Email 输入框需要验证。首先，我们使用 ValidationModel 创建了一个 Validation Model。在这个 Validation Model 中，我们传递了一个 email Validator，它会验证输入的 email 是否包含 '@' 和 '.'。如果输入的 email 不包含这两个字符，Validator 将返回错误消息 'Email is invalid.'。
然后，我们创建了一个 FormValidator，这个 FormValidator 会收集所有 ValidatedInput 的数据，并在表单提交时进行验证。
在 onSubmit 方法中，我们首先阻止了默认表单提交事件。然后，我们通过判断 formValidator.isValid 的值来判断表单是否可提交。
在最后，我们将 FormValidator 和 ValidationModel 分别通过 FormValidationProvider 和 ValidationProvider 传递到我们的表单中。这让 ValidatedInput 根据 ValidationModel 进行验证，而 FormValidator 可以在表单提交时进行验证。
结语
通过这份教程，我们学习了 react-form-validation-render-props 这个 npm 包的使用方法和基本概念。我们可以看到，它提供了非常良好的表单验证方案。感谢您阅读本篇文章，希望这个教程会对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f75238a385564ab6894