前端开发中，表单验证是必不可少的一个环节。在一些需要数据互通的场合，甚至需要实现异步验证。而对于表单验证，formsy-react-async 是一款非常优秀的 npm 包。
下面将介绍如何使用 formsy-react-async 来实现异步表单验证。
安装 formsy-react-async
首先，我们需要在项目中安装 formsy-react-async，通过 npm 命令即可完成：
npm install formsy-react-async --save
导入 formsy-react-async
在我们需要使用 formsy-react-async 的组件中，我们需要进行导入。在组件文件的开头，加入以下代码：
import React from 'react'; import Formsy from 'formsy-react'; import FormsyReactAsync from 'formsy-react-async';
使用 formsy-react-async
在 form 表单中，我们需要使用 formsy-react-async 组件来进行异步验证。我们可以在表单中使用一个 Input 组件，示例代码如下：
-- -------------------- ---- -------
--------
-----------------
---------------
------------------- --------------- --
------------------------ ----------------------- --
------------------
--------
-
------ ----------- --------------- --
-------------------
---------其中，name 属性设置的是表单项名称，validationsAsync 属性设置了异步验证函数，validationErrorsAsync 属性设置了异步验证失败时的错误信息，debounceTime 属性设置了异步验证的延迟时间，required 表示是否为必填项。
异步验证函数的代码如下：
-- -------------------- ---- -------
----- --------------- - ------- -------------- ---------------- -- -
-----------------------------------------
-------------- -- -
-- ---------------- --- ---- -
------------------ -- -
-- ------------ --- ----- -
----------------
- ---- -
------------------------------
-
---
- ---- -
---------------------------
-
--
--------- -- ------------------------------
--在异步验证函数中，我们可以使用 fetch 函数来获取服务器返回的验证结果，并根据验证结果执行 validCallback 或 invalidCallback。此处代码并未完全包含所有错误类型，我们需要根据具体的应用场景做出相应的修改。
最后，我们需要添加 validationErrorsAsyncErrorMsg 来提示用户表单项的验证错误信息。
const asyncValidationErrorMsg = {
asyncValidation: '用户名已被占用',
asyncError: '验证失败，未知错误',
serverError: '无法连接服务器'
};完整示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
------ ---------------- ---- ---------------------
----- --------------- - ------- -------------- ---------------- -- -
-----------------------------------------
-------------- -- -
-- ---------------- --- ---- -
------------------ -- -
-- ------------ --- ----- -
----------------
- ---- -
------------------------------
-
---
- ---- -
---------------------------
-
--
--------- -- ------------------------------
--
----- ----------------------- - -
---------------- ----------
----------- ------------
------------ ---------
--
----- ------ - -- -- -
------ -
--------
-----------------
---------------
------------------- --------------- --
------------------------ ----------------------- --
------------------
--------
-
------ ----------- --------------- --
-------------------
---------
--
--总结
formsy-react-async 是一款非常优秀的 npm 包，可以非常方便地实现异步表单验证功能。通过本篇文章的介绍和示例代码，我们可以快速掌握使用方法和技巧，并在实际开发中快速使用该功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fa981e8991b448dcfb4