npm 包 form-material-ui 使用教程

在前端开发中，表单是经常使用的元素之一。为了优化开发效率和提高用户体验，现有很多成熟的表单库和组件。而其中一款比较优秀的表单库就是 form-material-ui。本文将详细讲解这个 npm 包的使用方法，并且结合示例代码进行说明。

为什么使用 form-material-ui？

  • Material UI 风格：form-material-ui 样式风格遵循 Material UI 样式风格，使表单整体看起来更加美观易用。
  • 简单易用：使用 form-material-ui 调用组件非常简单，只需要几个配置项即可完成表单的构建，而且还支持自定义表单域。
  • 数据校验：form-material-ui 支持多种数据校验规则，例如必填项，数字类型，手机号等。同时也支持自定义校验规则，能够满足各种表单数据校验需求。
  • 高度可扩展：form-material-ui 支持高度自定义表单域，可以通过 React 组件来扩展原有的表单组件。同时也方便与其他第三方库和组件进行集成。

安装和使用

使用 npm 安装 form-material-ui：

--- ------- ----------------

form-material-ui 支持以传入配置对象的方式创建表单，支持表单数据校验、提交数据等功能。

------ ------ - -------- - ---- --------
------ - ----- ---------- ------------ - ---- -------------------

----- --- - -- -- -
  ----- -------- ---------- - -------------

  ----- ------------ - ------ ------ -- -
    --------------------- -- -- ------------- ------- ----- ----
  --

  ----- ------------ - ------- -- -
    -----------------------
    -- ------
    --------------------
  --

  ------ -
    ----- ------------------------
      ----------
        ---------------
        -----------
        --------
        -----------------------
      --
      ----------
        ---------------
        ----------
        --------
        ---------------
        -----------------------
      --
      -------------------------------
    -------
  --
--

------ ------- ----

上面的例子中，我们使用 useState 定义 values 和 setValues，其中 values 存储表单数据，setValues 用户更新表单数据。表单提交时，我们通过 console.log() 打印出表单数据。

这里我们仅仅使用了 TextField 和 SubmitButton 很基础的两个组件，下面将会介绍更多组件。

组件列表

1. Form

Form 是表单的顶层组件，它将内部的表单域组件包含在内，并实现了相关的校验逻辑。Form 内部需要包裹至少一个表单域组件，否则自动抛出错误。同时还需要传入相关配置项。

----- ----------------------- ------------------------------
  --- ----- ---
-------

属性

属性 描述 类型 是否必填 默认值 可选值
onSubmit 提交表单事件 function 是
initialValues 初始化表单数据 object 否 {}
validate 表单校验规则 object 否 {} validate.js 的校验规则或者自定义规则
validators 自定义表单校验规则 object 否 {} 自定义表单校验规则，用法见 自定义表单校验规则

方法

方法 描述 参数 返回值
resetFields 重置表单 - void
validate 表单数据校验 - Promise
getFieldValue 获取表单域值 field: string string or undefined
setFieldValue 设置表单域值 field: string, value: string void
setFieldsValue 设置多个表单域值 values: { [key in string]: string } void
setFieldsError 设置表单校验错误信息 errors: { [key in string]: string undefined }

2. TextField

TextField 组件是表单封装中常常使用的一个文本输入框组件，支持常用的表单校验属性。例如必填、最大值、最小值、正则表达式等。通过传入 name 属性决定输入框对应的 key 值，通过 onChange 执行数据更新操作。

----------
  ---------------
  -----------
  --------
  --------------------------------
  ----------------------------
  -----------------------
--

属性

属性 描述 类型 是否必填 默认值 可选值
name 表单域名称 string 是
label 表单域标签 string 是
defaultValue 表单域默认值 string 否 undefined
placeholder 表单域占位符文字 string 否 ""
helperText 表单域帮助提示文字 string 否 ""
required 表单域是否必填 boolean 否 false
disabled 表单域是否禁用 boolean 否 false
type 表单域类型 string 否 "text" "text" / "password"
onChange 表单域值变化回调函数 function 否
validate 表单域校验规则 object/string 否 "" 字符串表示预设的校验规则(object) 或自定义校验函数(string)
error 表单域校验信息，表示是否校验失败 boolean 否 false
errorText 表单域校验失败时的提示信息 string 否 ""
onEnterKeyDown 按下 enter 键的回调函数 function 否
debounceTimeout 输入延迟(ms)，如果存在则会等待延迟之后再更新数据 number 否 0
InputProps 表单域底层组件属性 object 否
shrink 标签是否收缩 boolean 否 false
fullWidth 宽度是否自适应父元素 boolean 否 true
inputStyle 内部输入框样式 object 否 {}
labelStyle 标题样式 object 否 {}
helpTextStyle 帮助提示文字样式 object 否 {}
errorTextStyle 表单域校验失败时的提示信息文字样式 object 否 {}
preValidateValue 前置函数，用于转换输入框所输入的值 function 否

3. Checkbox

Checkbox 组件是一种常见的表单域类型，常常被用于表示用户是否同意协议、阅读条款等场景中。

---------
  --------------
  --------------
  -----------------------
--

属性

属性 描述 类型 是否必填 默认值 可选值
name 表单域名称 string 是
label 表单域标签 string 是
checked 表单域选中状态 boolean 否 false
disabled 表单域是否禁用 boolean 否 false
onChange 表单域值变化回调函数 function 否
fullWidth 宽度是否自适应父元素 boolean 否 true
labelStyle 标题样式 object 否 {}
checkboxStyle 内部的 checkbox 样式 CheckboxProps 否

4. Select

Select 组件可以实现下拉式选择效果，例如性别、出生年月、国家和地区等场景。

-------
  --------------
  ----------
  ------------------ ------- -------- ----------
  -----------------------
--

属性

属性 描述 类型 是否必填 默认值 可选值
name 表单域名称 string 是
label 表单域标签 string 是
defaultValue 表单域默认值 string 否
options 选项数组，用于构建下拉式菜单 array 否 []
TextFieldProps 底层的文本输入框属性 object 否
onChange 表单域值变化回调函数 function 否
fullWidth 宽度是否自适应父元素 boolean 否 true
labelStyle 标题样式 object 否 {}
inputStyle 底层文本输入框样式 object 否 {}
menuStyle 选项菜单样式 object 否 {}
menuItemStyle 选项菜单项样式 object 否 {}
menuItemSelectedStyle 被选中的选项菜单项样式 object 否 {}
menuIconStyle 选项菜单图标样式 object 否 {}

5. RadioGroup

RadioGroup 组件为类似于复选框组的枚举型组件，常常用于表示单选框选项，例如性别、新旧、定期存款等场景。

----- ------- --------- - -----------------

----- ------------ - ------- -- -
  -----------------------------
--

----------- ------------- ---------- ------------- ------------------------
  ----------------- ------------ --------------- --- --------- --
  ----------------- -------------- --------------- --- --------- --
  ----------------- ------------- --------------- --- ---------- --
-------------

属性

属性 描述 类型 是否必填 默认值 可选值
name 表单域名称 string 是
label 表单域标签 string 是
defaultValue 默认选中值 string 否
value 当前选中值 string 是
onChange 表单域值变化回调函数 function 否
fullWidth 宽度是否自适应父元素 boolean 否 true
labelStyle 标题样式 object 否 {}
FormControlLabelProps 可选，控件默认属性 object 否 {}
RadioGroupProps 可选，RadioGroup默认属性 object 否 {}

6. DatePicker

DatePicker 常常用于用户填写日期，例如出生日期、预约日期等场景。

----- ------ -------- - ------------ --------

----- ------------ - ------ -- -
  --------------
--

----------- ----------- ------------ ------------ ----------------------- --

属性

属性 描述 类型 是否必填 默认值 可选值
name 表单域名称 string 是
label 表单域标签 string 是
format 日期格式 string 否 "YYYY-MM-DD" "YYYY-MM-DD" / "YYYY/MM/DD" / "MM-DD-YYYY" / "MM/DD/YYYY"
value 当前选中日期值 Date 是
onChange 表单域值变化回调函数 function 否
fullWidth 宽度是否自适应父元素 boolean 否 true
labelStyle 标题样式 object 否 {}
inputStyle 内部输入框样式 object 否 {}
DatePickerProps 底层组件属性 object 否 {}

自定义表单校验规则

form-material-ui 支持自定义表单校验规则，可以通过传入字符串或者函数来自定义校验规则。

字符串规则

例如，下面的代码定义了一个名字必须为长度大于等于5的规则：

----- ----- - - 
  ----- -------- --------- ---- 
--

----- ----------------------- ------------------ -----------------
  --- ----- ---
-------
  • length: {is | minimum | maximum | equalTo: number}

除了 is 之外，三个校验规则均需要在大括号里面指定必填属性，例如：minimum: 3, maximum: 14, equalTo: 3。

自定义函数

自定义函数的形式为：

----- ---------- - ------- -- -
  -- ---------------------------- -
    ------ ----- ------ ---- ------- -----------
  -
--

自定义校验函数返回值有两种：

  • 返回一个字符串，表示校验失败，提供错误提示信息。
  • 返回任意非字符串类型值，表示校验成功。

自定义校验规则可以通过 validators 属性传入。

----- ---------- - -
  ------- -----------
--

----- ----------------------- ------------------ ------------------------
  --- ----- ---
-------

总结

本文介绍了

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ad281e8991b448d86aa

阅读全文

猜你喜欢

  • npm 包 eslint-config-vpgame 使用教程

    前言 在前端开发中，我们经常使用不同的代码风格检查工具来提高代码质量，其中之一是 eslint。在 eslint 的配置中，我们可以使用 eslint-config-vpgame 这个 npm 包来快...

    2 年前
  • npm 包 @sidewaybot/chatty-vorpal 使用教程

    前言 在前端开发中，npm 包已经成为了我们必不可少的工具之一。而 @sidewaybot/chatty-vorpal 这个 npm 包则是一个非常实用的交互式命令行工具包，可以帮助我们开发出更加高效...

    2 年前
  • npm 包 homebridge-blinds-tcp 使用教程

    在智能家居设备的常见场景中，自动窗帘控制是一个常见的需求。为了实现这样的功能，我们可以通过 homebridge-blinds-tcp 这个 npm 包来实现窗帘控制。

    2 年前
  • npm 包 eve-core 使用教程

    在前端开发中，npm 是一个不可或缺的工具，它可以方便地安装和管理第三方包。其中，eve-core 是一个非常实用的工具包，它为开发者提供了很多常用的函数和类库，可以大大减少开发时间和提高开发效率。

    2 年前
  • npm 包 slackhooks 使用教程

    npm 包 slackhooks 使用教程 在前端开发中，我们常常需要与其他人协同工作，并保持信息的及时交流。为了方便团队成员之间交流和分享信息，我们可以使用 slackhooks 这个 npm 包。

    2 年前
  • npm 包 nodebb-plugin-soundpack-aosp 使用教程

    前言 随着互联网的快速发展，前端技术日新月异。前端技术的发展也带来了前端工具的不断更新。npm 包作为前端开发中必不可少的一部分，也不断地有新的包和版本发布。nodebb-plugin-soundpa...

    2 年前
  • npm 包 module-template-vue 使用教程

    在前端开发中，组件化是一个不可避免的话题。而使用组件化开发的前提是要有一套完善的模板，并且该模板需要具备良好的可扩展性和可维护性。为了解决这个问题，我们介绍一款非常实用的 npm 包，那就是 modu...

    2 年前
  • npm 包 crawl_holiday_data 使用教程

    随着人们对于假期的关注度不断提高，许多应用都需要获取假期相关信息来满足用户需要。而如果手动去获取假期信息比较繁琐，不但时间成本高，还容易出现数据不准确的情况。于是，开发者们开始使用 npm 包来自动化...

    2 年前
  • npm 包 mapp-translate 使用教程

    简介 mapp-translate 是一个由 JavaScript 编写的前端翻译库，它能够帮助我们快速地进行多语言翻译。 使用该库，我们可以在应用程序中轻松地实现语言切换功能，以便为用户提供更好的用...

    2 年前
  • NPM 包 kraken-release-notes 使用教程

    前言 在前端开发领域中，我们经常需要处理漏洞修复、功能增强、代码优化等问题，并不断推出新版本的代码。而在发布新版本时，我们也需要及时更新版本信息，以便于大家了解当前版本的变动情况。

    2 年前
  • npm 包 laravel-elixir-rev-manifest 使用教程

    简介 laravel-elixir-rev-manifest 是一个用于通过 Laravel Elixir 自动版本化前端静态文件的 npm 包。 使用该包可以轻松实现对前端静态资源进行版本控制，并且...

    2 年前
  • npm 包 cottage-barney 使用教程

    简介 cottage-barney 是一个基于 React 的 UI 库，在前端开发中能够方便地快速构建界面。它包含了各种常用的组件，如按钮、表格、表单、菜单等，同时具有灵活的定制性，让你按照自己的需...

    2 年前
  • npm 包 fs-promisify 使用教程

    在 Node.js 中，我们经常需要使用文件系统 API 来读写文件、创建文件夹等操作。然而，由于 Node.js 的异步编程模型，使用这些 API 时需要通过回调函数来处理异步操作，这使得代码变得难...

    2 年前
  • npm 包 data-watch 使用教程

    在前端开发中，我们经常需要监听一些数据的变化并做出相应的处理。而 npm 包 data-watch 就为我们提供了一种简单、易用的方式来实现数据的监听和处理。本篇文章将介绍 data-watch 的使...

    2 年前
  • npm 包 switz 使用教程

    在前端开发中，我们经常会遇到需要对元素进行样式的处理，针对这个需求，有很多现成的 CSS 框架和库。但是一些项目可能需要更个性化的样式，这个时候就需要灵活地组合 CSS 属性和值，实现我们需要的效果。

    2 年前
  • npm包time-ampm 使用教程

    介绍 time-ampm是一个npm包，用于将24小时制的时间转化为12小时制，并且添加上午或下午标识符。这个包使用简单，且能够将时间对象转化为字符串格式。 安装 time-ampm安装非常简单，可以...

    2 年前
  • npm包 generator-exobot 使用教程

    随着前端技术的快速发展，node.js已经成为了前端开发的重要部分。而 npm 则成为了前端构建工具、模块管理器的首选。今天我将向大家介绍一个有用的 npm 包 —— generator-exobot...

    2 年前
  • npm 包 robinhood-service 使用教程

    Robinhood-service 是一个 Node.js 的 npm 包，它提供了访问罗宾汉股票交易平台 (Robinhood) API 的功能。如果你是一个前端开发者，正在寻找一个简单易用、功能丰...

    2 年前
  • npm 包 kap-plugin-mock-context 使用教程

    在前端开发中，经常会遇到需要模拟后端 API 请求的情况，通常的做法是手动 mock 接口数据，但是这种做法很繁琐，特别是当需要 mock 的接口较多时。幸运的是，这个问题可以通过一个 npm 包 k...

    2 年前
  • NPM 包 gulp-breakdance 使用教程

    简介 gulp-breakdance 是一个基于 gulp 的插件，用于将 HTML 转化为 Markdown 格式，方便文档的编写和管理。 本教程将详细介绍 gulp-breakdance 的安装与...

    2 年前

相关推荐

    暂无文章