简介
在 Web 开发过程中，表单验证是必不可少的一部分。而 react-valid-forms 是一个使用简单且充满功能的表单验证 npm 包。
react-valid-forms 支持如下功能：
- 必填字段验证
- 邮箱格式验证
- 手机号码格式验证
- 自定义正则验证
- 最大字符数限制
- 最小字符数限制
- 提交按钮的禁用与启用
此外，react-valid-forms 还支持自定义错误信息和成功信息的渲染方式。
使用方法
安装
在项目根目录下运行 npm install react-valid-forms 安装 react-valid-forms。
使用
首先在要使用 react-valid-forms 的组件中引入 react-valid-forms 组件。然后，在表单的 form 标签中添加 onSubmit 属性，并赋值为 react-valid-forms 提供的 handleFormSubmit 函数。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------------- ----- - ---- --------------------
----- ------------------ - -- -- -
----- -------- - ---------- -- -
----------------------
--
------ -
---------------- --------------------
-----
------ -----------------------------
------
------------
-------------- --------- ----- ------ ---- --
---------------
--------- ------- ----- ---- ----- ----------
------ ------- ----- - ----- ----- ----------
--
--------------------- ------
-
--- ----------- ------ ------- -- -- -
--
------ ---------- ------------ --------------- --
-------- -- -- ------------------------------------------
------ -- -- --------------------------------------
---
--
--------
------
------- ----------------------------
------------------
--
--
------ ------- -------------------在 Field 组件上添加以下属性进行验证：
name: 表示该字段的名称。validations: 表示该字段要进行的验证类型和规则。errorMessage: 自定义错误信息。successMessage: 自定义成功信息。
在 Field 组件的子组件中，我们可以根据错误信息和成功信息的状态自定义渲染方式。inputProps 属性会将组件内的所有属性传递给渲染的 input 标签。
最后，在表单提交时，调用 this.props.handleSubmit 函数，将数据传递给父组件进行处理。
总结
通过 react-valid-forms 这个 npm 包，我们可以快速简单地实现表单验证功能，并且具有顶尖的灵活性。例如，我们可以自定义错误信息和成功信息的渲染方式，也可以自定义验证规则。
下面是其他可用的验证规则：
-- -------------------- ---- -------
------
-------------------
--------------
--------- -----
-------- ----------------
---------- ---
---------- --
--
---------------
--------- ------- ----- ---- ----- ---------
-------- ------- ----- - ----- -------- ----- --------
--
-关于 react-valid-forms，还有很多细节问题和优化点等待进一步深入学习和实践。但是相信通过此教程，你可以轻松地使用 react-valid-forms 完成表单验证。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574d681e8991b448ea2b0