npm 包 react-am-formutil 使用教程

前言

在前端开发过程中，表单验证是不可避免的问题。react-am-formutil 是一款基于 React 的表单验证库，可以帮助我们快速构建表单验证逻辑。本篇教程介绍该库的使用方法，并提供示例代码。

安装和导入

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

基本使用

通过 createForm 创建表单

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

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

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

通过 useForm 创建表单

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

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

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

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

表单验证

必填项验证

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

格式验证

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

异步验证

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

示例代码

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

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

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

总结

react-am-formutil 是一款非常实用的表单验证库，可以快速地构建表单验证逻辑，并提供了丰富的验证方式。使用该库可以有效地提高前端开发效率，并减少开发难度。

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

阅读全文

猜你喜欢

  • npm 包 egg-direct 使用教程

    在前端开发中，很多项目都会涉及到后端的搭建和接口的调用。而 Egg.js 是一个基于 Node.js 和 Koa.js 的企业级框架，可以帮助我们快速构建稳定可靠的后端服务。

    4 年前
  • npm包Gatsby-plugin-trustpilot使用教程

    什么是 Gatsby-plugin-trustpilot？ Gatsby-plugin-trustpilot是一个NPM包，它允许开发人员轻松地将Trustpilot评分集成到他们的网站中。

    4 年前
  • npm 包 @indlekofer/object_set 使用教程

    介绍 @indlekofer/object_set 是一款用于 JavaScript 对象深层嵌套属性赋值的 npm 包。它能够帮助开发者轻松地在对象中设置值，无需手动逐层遍历对象。

    4 年前
  • npm 包 incentro-adf-msoffice-module 使用教程

    1. 前言 incentro-adf-msoffice-module 是一个基于 Node.js 的 npm 包，用于在 Alfresco Content Services 中集成 Microsoft...

    4 年前
  • npm 包 discord-bans 使用教程

    简介 discord-bans 是一个基于 Discord API 的 npm 包，用于管理和查询已经被禁止进入 discord 服务器的用户。它可以获取所有已经被删除的用户，查看所有用户的禁言状态，...

    4 年前
  • npm 包 ucarui-theme-chalk 使用教程

    前言 在开发 Web 前端界面时，样式是一个十分重要且需要面对的问题。为了方便统一样式风格，并实现一定的定制化，许多 UI 框架都会提供自定义主题的功能。 在此基础上，我们介绍一种基于 Vue.js ...

    4 年前
  • npm 包 ace-scripts 使用教程

    前言 近年来，随着前端技术的迅猛发展，前端项目的工程化、自动化已经成为了一种必需品。而 npm 包作为前端项目的重要组成部分，无论是开源库还是开发工具，都在不断涌现。

    4 年前
  • npm 包 @gothbarbie/data-type-tool-belt 使用教程

    简介 @gothbarbie/data-type-tool-belt 是一个针对 JavaScript 数据类型的工具包，提供了丰富的方法和函数，可以大大方便前端工程师处理数据类型相关问题。

    4 年前
  • npm 包 ucarui 使用教程

    前言 在前端开发中，我们常常需要使用各种 UI 组件，以提高开发效率并提供良好的用户体验。而 ucarui 是一个优秀的 UI 组件库，提供了丰富的组件及组件样式库，适用于各种 Web 应用的开发。

    4 年前
  • npm 包 package-json-sorter 使用教程

    简介 在前端项目中，使用 npm 包管理器进行依赖包的安装是非常常见的操作。而对于那些使用大量依赖包的项目来说，可能会遇到一个问题：依赖包在 package.json 文件中的顺序混乱，这会导致阅读和...

    4 年前
  • npm 包 package-json-sorter-cli 使用教程

    前言 在前端开发中，我们经常需要管理和维护项目依赖关系。而 npm（Node.js 的包管理器） 便是我们经常使用的依赖包管理工具，可用于发布、安装、卸载和搜索各种 JavaScript 模块。

    4 年前
  • npm 包 switch-writable 使用教程

    前言 在前端开发中，我们经常会遇到需要传递一些参数或者数据的情况，而这些数据可能会因为不同的环境或者不同的目的而需要不断地修改。为了方便我们进行数据的传递和修改，一些开发者就创建了一些 npm 包来帮...

    4 年前
  • npm包@webcomputing/tslint-config-webcomputing使用教程

    在前端开发中，代码质量和规范是十分重要的。tslint可以帮助我们在代码的规范性和一致性上提供一定的帮助。本文将介绍@webcomputing/tslint-config-webcomputing包的...

    4 年前
  • npm 包 @vutr/react-coverflow 使用教程

    前言 在前端开发中，图片展示是经常会用到的一种功能。而 coverflow 是一种比较炫酷的展示方式，可以让用户更好地浏览图片。而使用 npm 包 @vutr/react-coverflow 可以很方...

    4 年前
  • npm 包 shine-office-module 使用教程

    在前端开发过程中，我们经常需要处理 Excel 文档、Word 文档等办公文档。而 Shine 的 Office 模块则提供了一种简单易用的方法来处理这些文档。本文将介绍如何使用 npm 包 shin...

    4 年前
  • npm 包 auth0-get-all-users 使用教程

    介绍 auth0-get-all-users 是一个可以使用 Node.js 调用 Auth0 API 获取用户列表的 npm 包。它支持以分页方式获取所有用户信息，同时提供了过滤和排序的功能。

    4 年前
  • npm 包 kodi-addon-builder 使用教程

    前言 在制作 Kodi 插件的过程中，我们需要进行很多繁琐的工作，包括写 XML 文件、处理图像资源、搭建环境等等。这显然会消耗开发者大量精力与时间。因此，本文将介绍一款名为 kodi-addon-b...

    4 年前
  • npm 包 san-webpack-loader 使用教程

    简介 san-webpack-loader 是一个 Webpack 的 Loader 插件，用于编译 San 组件。 San 是腾讯的 MVVM 前端框架，与 Vue 和 React 类似，但其中有一...

    4 年前
  • npm 包 pdfmerge-cli 使用教程

    PDF 文件是很常见的一种文档格式，但是如果需要将多个 PDF 文件合并成一个，手动操作就非常繁琐。而 pdfmerge-cli 可以通过命令行工具来实现 PDF 文件的合并，非常方便快捷。

    4 年前
  • npm 包 omtv-react-main-menu-item 使用教程

    前言 在使用 React 开发 Web 应用时，常常需要实现一个主菜单组件，用于导航不同页面或模块。omtv-react-main-menu-item 就是一个轻量级、易于使用和扩展的 React 主...

    4 年前

相关推荐

    暂无文章