介绍
yube-formsy-material-ui 是一个基于 Material-UI 和 formsy-react 的 npm 包，它提供了一系列 Material-UI 组件的 formsy-react 包装器，使得在 React 中更加容易地集成表单验证。
安装
可以通过 npm 安装这个包。
npm install yube-formsy-material-ui --save
如何使用
yube-formsy-material-ui 中的组件已经被包装成 formsy-react 组件。当你使用时，只需要像使用任何 formsy-react 组件那样使用即可。
以下是一个基本示例，它将演示如何使用 yube-formsy-material-ui 中的 TextField 组件：
------ ----- ---- --------
------ - ---------- - ---- --------------------------
------ - ------------ - ---- --------------
----- ----------- ------- --------------- -
------------------ -
-------------
----------- - -----------------------
-
------------ -
----------------- ------ ------
-
-------- -
------ -
------------ ----------------------------
----------- ------------ --------------------- -------- ---------------- --
------------- ------------- -------------- --
--------------
--
-
-
------ ------- ------------上述示例中，我们首先引入了要使用的组件——FormsyText 和 RaisedButton。在 render 方法中，我们使用了 Formsyy.Form 包装我们的整个表单，FormsyText 是一个表单输入组件，我们通过 name、validations 和 hintText 属性配置了该组件。最后，我们使用了 RaisedButton 组件来提交表单。
组件
除了文本输入组件 FormsText，yube-formsy-material-ui 还包装了以下 Material-UI 组件进行验证：
- FormsCheckbox
- FormsDatePicker
- FormsRadioButtonGroup
- FormsSelectField
在使用这些组件时，与使用 FormsyText 组件类似，只需将这些组件包装在 Formsy.Form 组件中，并使用 validations 和 required 属性进行配置即可。
验证规则
通过使用 yube-formsy-material-ui，你也可以使用 formsy-react 中的验证规则，如 isEmail、isExisty、isURL 等等。
一些通用的验证规则：
- isExisty
- isEmail
- isNumeric
- isString
- isWhitespace
- isURL
结论
在本文中，我们介绍了如何使用 yube-formsy-material-ui 来更加轻松地在 React 中集成表单验证。在实践中，可以通过将组件包装在 Formsy.Form 中，并使用 validations 和 required 属性对表单进行配置来进行表单验证。此外，我们也可以使用 formsy-react 提供的一系列验证规则进行验证。
希望以上介绍对你有所帮助，谢谢。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601c81e8991b448de477