在前端开发中，我们经常需要使用表单来搜集用户的信息，然而表单验证和处理一般是比较麻烦的事情。为了简化表单操作，社区中出现了一种非常流行的解决方案，那就是 Formsy。
Formsy 是一个 React 的表单验证和处理工具，它不仅提供了基本的表单验证功能，还支持异步验证，自定义验证规则，以及表单状态管理等一系列功能。但是在实际工作中，直接使用 Formsy 还是有些繁琐。这时候，我们就可以使用 formsy-material-ui-customized 这个 npm 包，它是一个针对 Material-UI 组件库进行了深度定制的 Formsy 扩展库。
安装
首先在项目目录下使用 npm 进行安装：
npm install formsy-material-ui-customized
使用步骤
使用 formsy-material-ui-customized，我们需要先导入它们的组件：
import { FormsyText, FormsySelect, FormsyDate } from 'formsy-material-ui-customized';然后我们就可以在表单中使用这些组件了，比如：
<FormsyText
name="fullName"
label="Full Name"
required
validationErrors={{
isDefaultRequiredValue: 'Please enter your full name',
}}
/>这里我们使用了 FormsyText 组件， 它是一个文本框，我们需要传入 name，label，required 等属性来自定义它的行为。如果用户没有填满这个文本框，那么 .isRequired 那儿的的文本信息会被显示。除此之外，Formsy 还支持很多其他类型的表单组件，如 FormsyCheckbox、FormsyRadioGroup、FormsyToggle 等，它们都支持相应类型的验证。
表单提交事件
表单提交事件通常是我们最重要的事件之一。在使用 Formsy 时，我们可以在 Formsy 中通过 onValidSubmit 或 onInvalidSubmit 这两个回调函数来处理表单的提交。它们分别在表单验证成功和验证失败时触发。
-- -------------------- ---- -------
----- ------ ------- --------------- -
------------ - ---------- -- -
----------------------
-
----------- - -------- -- -
------------------- ----- ----- --------
-
-------- -
------ -
------- ---------------------------- -----------------------------------
-----------
---------------
----------- -----
--------
-------------------
----------------------- ------- ----- ---- ---- ------
--
--
--- ------------
---------
--
-
-在这里，我们实现了一个简单的表单组件，并且指定了表单提交成功和失败的两个回调函数。 onValidSubmit 函数将 formData 作为它的参数，这个参数是一个对象，包含表单中的所有输入字段。onInvalidSubmit 函数将会抛出错误数组，包含了验证失败的字段和错误信息。这些错误信息可以用来定制我们的提示信息，帮助用户更容易地找到他们错误想要更改的字段。
更多特性
除了上述的特性外， formsy-material-ui-customized 还提供了很多其他便捷而有用的特性：
动态验证
对于某些表单元素来说，并不能根据固定的规则来验证，这时候 Formsy 的异步验证就可以派上用场了。异步验证可以对任意的表单元素进行验证，并且可以定制它的验证规则。比如，我们可以使用异步验证来验证用户名是否已经注册过：
-- -------------------- ---- -------
-----------
---------------
----------------
--------
-------------------
----------------------- ------- ----- ---- ---------
--
-------------------
-------------- ------------------ --------- -
----------------------------------- -- -
-----------
----------- -- -
-------------- -------- -- ------- --------
---
-
--
---------------------
-------------- ----- -------- -- ------- ------
--
--在这里，我们使用 asyncValidations 选项传入了一个回调函数，它使用 api.checkUsername 去检查这个用户名是否已经注册过，在这个答复中，我们通过 callback() 来表示该用户名可以使用，如果检查失败，我们则使用 callback('This username is already taken') 来通知用户该用户名已经被占用了。
定制错误消息
如果你想要修改出现的错误消息，你只需要传入 validationErrors 的一个对象即可：
<FormsyText
name="email"
label="Email"
required
validationErrors={{
isEmail: 'Please enter correct email address'
}}
/>其他 Formsy 扩展
formsy-material-ui-customized 还扩展了一些其他的 Formsy 组件， 如 FormsYTimePicker、FormsyDatePicker、FormsyRadio 等等，而这些组件可以成为你开发表单时的首选，可以节约你的时间和精力。
总结
Formsy 在现代前端开发中广泛使用，而 formsy-material-ui-customized 则更加便捷地利用了 Material-UI 组件库，使我们能够快速构建和验证表单。它提供了许多有用的特性和易于使用的 API，并且支持异步验证和自定义错误提示。在后续的开发中，我们可以继续尝试使用其它表单验证组件，以便更好的提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a281e8991b448dfd43