在前端开发中，表单是相当重要的一个模块，而 Material-UI 是 React 的一个 UI 组件库，提供了许多优美的 UI 组件，formsy-material-ui-fork-ck 则是一个封装了 Material-UI 组件的表单校验库，本文就来介绍一下该库的使用教程和相关特性。
安装
该库是通过 npm 包管理器来分发的，我们需要在终端进入项目目录并执行以下命令：
npm install formsy-material-ui-fork-ck --save
这里需要注意，我们需要使用 formsy-form 包作为表单库，因此还需要安装该包：
npm install formsy-react --save
引入
安装完成后，我们需要将其引入到项目中，可以在入口文件中（如 index.js）中进行全局配置：
-- -------------------- ---- -------
------ ------ ---- ---------------
------ ------------------ ---- --------------
------ -------------- ---- -----------------------------
------ ---------- ---- --------------------------------------------
------ ----------- ---- ---------------------------------------------
------ ---------------- ---- --------------------------------------------------
------ ------------ ---- ----------------------------------------------
------ ---------- ---- --------------------------------------------
------ ---------- ---- --------------------------------------------
----- --- - -- -- -
------------------
-------------
--------------- --------------------- ----------------------- ------------ -- --------- --
----------- ----------------- ------------ -- ----- --
------------ ------------------ -------------------- ------------ -- ------ --
----------------- ----------------------- ------------ -- ----- -------
------------ --------------------- ------------ -- ----- -- --
------------ --------------------- ------------ -- ----- -- --
------------ --------------------- ------------ -- ----- -- --
-------------------
------------- ------------------- ------------ -- ------- --
----------- ----------------- ------------ -- ----- --
----------- ----------------- ------------ -- ----- --
--------------
-------------------
--通过全局配置，我们可以方便地在项目中使用该库来构建表单。
组件
formsy-material-ui-fork-ck 提供了一系列的组件，包括：
- FormsyCheckbox：多选框；
- FormsyDate：日期选择器；
- FormsyRadio：单选框；
- FormsyRadioGroup：单选框组；
- FormsySelect：下拉选择框；
- FormsyText：文本输入框；
- FormsyTime：时间选择器；
这些组件均为 Material-UI 的组件进行了封装，并支持表单校验功能。
表单校验
formsy-material-ui-fork-ck 提供了丰富的表单校验功能，包括：
- isExisty：是否存在；
- isEmail：是否为邮箱地址；
- isNumeric：是否为数字；
- isRequired：是否必填；
- isUrl：是否为 URL 地址；
- maxLength：最大长度；
- minLength：最小长度。
例如，我们需要对一个文本输入框进行校验，首先添加校验规则：
-- -------------------- ---- -------
-----------
-----------------
------------ -- -----
--------------
-------- -----
---------- ---
---------- --
----------- -----
--------- ----
--
-------------------
-------- ------- ----- - ----- ----- ---------
---------- ------- ----- -- ---- ---- -- ------------
---------- ------- ----- -- ----- - ------------
----------- ----- ----- -- ----------
--------- ----- ----- --- --- -- ------
--
--上述代码中，我们定义了该文本输入框需要进行的校验规则，其中包括是否为邮箱地址、最大长度、最小长度、是否为必填字段和是否存在，同时还定义了每个规则对应的错误提示信息，使用 validationErrors 进行声明。
接着，我们需要在提交表单的时候进行表单校验：
handleSubmit = (data) => {
console.log('Form data', data);
}
<Formsy.Form onValidSubmit={this.handleSubmit}>
...
</Formsy.Form>样式
由于该库封装了 Material-UI 的组件，因此我们可以直接使用 Material-UI 的主题样式来设置组件的样式，如：
-- -------------------- ---- ------- ------ -------------- ------------- ---- ---------------------------- ----------- --------------- --------------- ---- --------- ---------------------------- --------------------------- -------------- -------------------------------- -------------- -------- --
该段代码中，我们使用了两种不同的颜色来设置用户名输入框的浮动标签颜色，通过传递 style 和 focusStyle 来实现。
快速开始
在真正使用该库之前，我们可以先通过以下 XXXX 来快速入门：
- 官方文档：（XXXX）
总结
formsy-material-ui-fork-ck 提供了丰富的表单组件和表单校验功能，并且对 Material-UI 的 UI 组件进行了封装，使得表单的构建变得更加轻松，但是由于其对 Material-UI 的依赖关系，因此需要较长的加载时间，同时也需要遵循 Material-UI 的样式规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005608a81e8991b448debde