在前端开发的过程中，表单验证是一个非常重要的功能。在很多场景中，我们需要对用户输入的数据进行合法性检查。npm 上有许多优秀的表单验证工具，其中，validated-form 是一款非常受欢迎的工具。
validated-form 是一个基于 React 的表单验证组件库，它提供了一系列的表单验证规则及自定义验证方法，能够满足我们大多数表单验证需求。
本文将介绍 validated-form 的使用方法，包括安装、基本使用及高级用法。
安装
使用 validated-form 前，需要先安装 React。在安装 React 后，可以使用 npm 安装 validated-form。
npm install validated-form --save
基本使用
使用 validated-form 的基本流程如下：
- 定义表单项；
- 定义验证规则；
- 渲染 validated-form 组件，并指定表单项和验证规则；
- 监听 validated-form 组件的 onSubmit 事件，并处理表单提交。
以下是一个简单的示例代码，演示了如何使用 validated-form 进行表单验证。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------
----- ------------ ------- --------------- -
------------------ -
-------------
---------- - -
--------- -
--------- ---
------ ---
--------- ---
--
---------------- -
--------- -
- ----- ----------- ------------- --------- --
- ----- ----------- ------------- --------------- --
--
------ -- ----- ----------- ------------- ------ ----- -- - ----- -------- ------------- ------ ------ ---
--------- -- ----- ----------- ------------- -------- -- - ----- -------------- ------------- --------- - -- ---
--
--
-
------------ - --- -- -
-------------------
-- ---------------------- -
-- -------------
----- - -------- - - -----------
----------------------
-
--
------------ - ------ ------ -- -
----- - -------- - - -----------
---------------
--------- -
------------
------- ------
--
---
--
-------- -
----- - --------- --------------- - - -----------
------ -
-------------- ----------- -- ---------- - ------ -----------------------------
-----
------------------
------ ----------- --------------- ------------------------- ------------- -- ----------------------------- ---------------- --
------
-----
--------------------
------ ------------ ------------ ---------------------- ------------- -- -------------------------- ---------------- --
------
-----
-----------------
------ --------------- --------------- ------------------------- ------------- -- ----------------------------- ---------------- --
------
------- -------------------------
----------------
--
-
-上述示例代码中，RegisterForm 组件定义了一个包含 3 个表单项的表单。在注册按钮被点击时，会触发 handleSubmit 函数，如果表单验证通过，则会输出表单数据。
在 handleSubmit 函数中，调用了 validated-form 组件的 validate() 方法进行表单验证，如果验证通过，则返回 true。如果验证不通过，则 validated-form 组件会自动显示相应的错误信息。
验证规则
validated-form 提供了许多常用的验证规则，如 required（必填）、email（Email 格式）、url（URL 格式）、minLength（最小长度）、maxLength（最大长度）、alphaNum（字母或数字）等。在定义表单项时，可以指定相应的验证规则。
由于 validated-form 的验证规则是基于 validatorjs 库实现的，因此，validated-form 支持所有 validatorjs 支持的验证规则。例如，如果需要用正则表达式对表单项进行验证，可以使用“regex”规则。
以下是 validated-form 支持的常用验证规则：
| 规则 | 说明 |
|---|---|
| required | 必填 |
| Email 格式 | |
| url | URL 格式 |
| alpha | 字母 |
| alphaNum | 字母或数字 |
| numeric | 数字 |
| integer | 整数 |
| float | 浮点数 |
| minLength:n | 最小长度为 n |
| maxLength:n | 最大长度为 n |
| same | 与指定字段相同 |
| different | 与指定字段不相同 |
| in | 在指定列表中 |
| notIn | 不在指定列表中 |
| regex | 满足指定正则表达式 |
| date | 日期格式（YYYY-MM-DD） |
| dateBefore | 在指定日期之前 |
| dateAfter | 在指定日期之后 |
在定义验证规则时，可以指定错误信息。例如：
{
email: [
{ rule: 'required', errorMessage: 'Email 不能为空' },
{ rule: 'email', errorMessage: 'Email 格式不正确' }
]
}如果验证不通过，则 validated-form 会使用 errorMessage 中的文本作为错误提示信息。
自定义验证规则
validated-form 还允许我们自定义验证规则。在定义验证规则时，可以指定一个回调函数作为验证规则。例如：
-- -------------------- ---- -------
-
--------- -
-
---------- ------- -- -
-- ----------------------- -- -- -
------ ------ -- -----
-
------ ----- -- ----
--
------------- --------- ---------------
--
--
-在上述示例代码中，自定义了一个验证规则，判断用户名中是否包含 "admin"。如果包含，则验证不通过，否则验证通过。
表单项的引用
在 validated-form 中，我们需要使用表单项的名字来指定对应的表单验证规则。表单项的名字可以是任意字符串，但不建议使用具有特殊含义的字符串，如“submit”、“reset”等。
validated-form 使用 refs 引用子组件，可以使用 ref 获取 validated-form 组件的引用。在 validated-form 中，每个表单项都有一个 uniqueKey 属性，该属性用于在 validated-form 组件中引用对应的表单项。
在 handleChange 回调函数中，我们需要根据表单项名字更新表单数据。在 validated-form 中，可以使用 uniqueKey 属性来标识表单项，并在 handleChange 回调函数中更新表单数据。
示例代码：
-- -------------------- ---- -------
------------ - ----- ------ -- -
----- - -------- - - -----------
---------------
--------- -
------------
------ ------
--
---
--
-------- -
----- - -------- - - -----------
------ -
-------------- -----------------------------
-----
------------------
------ ----------- -------------------- ------------------------- ------------- -- ----------------------------- ---------------- --
------
-----
--------------------
------ ------------ ----------------- ---------------------- ------------- -- -------------------------- ---------------- --
------
-----
-----------------
------ --------------- -------------------- ------------------------- ------------- -- ----------------------------- ---------------- --
------
----------------
--
-高级用法
validated-form 还提供了许多高级功能，例如自定义验证规则、动态添加/删除表单项、异步验证、验证消息本地化等。详情可以参考 validated-form 的官方文档。
总结
validated-form 是一款优秀的表单验证组件库，它提供了丰富的表单验证规则及自定义验证方法，并支持动态添加/删除表单项、异步验证等高级功能，可大大简化表单验证的开发工作。
希望这篇文章能够帮助读者了解 validated-form 的使用方法，使得在开发表单验证时更加方便快捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ea481e8991b448dc06d