npm 包 formsy-react-cp-fork 使用教程

阅读时长 6 分钟读完

在前端开发中,表单是提供给用户输入和提交数据的重要界面组件。为了方便在 React 应用中创建复杂和动态的表单,社区里涌现了各种相关的 npm 包。其中 formsy-react-cp-fork 是一个优秀的表单管理工具,充分利用了 React 的组件特性以及表单验证的基本概念,可谓是前端开发中不可缺少的利器。本文将详细介绍 formsy-react-cp-fork 的使用,以及如何为 React 应用集成表单验证。

formsy-react-cp-fork 简介

formsy-react-cp-fork 是一个基于 formsy-react 的封装库,帮助我们更加方便地管理表单中的验证、数据收集、数据展示等。它的主要特点有:

  • 支持动态表单,可快速地创建、更新表单项。
  • 提供了表单验证和错误信息提示的功能。
  • 支持组件级别的表单管理,无需组件父级的干涉。

相比于纯手写表单和其他的表单管理工具,在代码可维护性、复用性、开发效率等方面都有很多的优势。我们将会在下一部分详细介绍怎样使用它。

使用 formsy-react-cp-fork

安装 formsy-react-cp-fork 模块:

在你的代码中,通过 Formsy.Form 创建一个表单组件,并用各种表单项填充它。这里以一个用户登录表单为例,它包含了用户名、密码、以及“记住我”的输入框:

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

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

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

使用 formsy-react-cp-fork,我们定义了表单的输入项,并且设定了它们的类型、默认值、验证规则等。将这些表单项放在 Formsy.Form 中应用,然后我们可以通过 onValidSubmit 来指定表单验证通过后的处理函数。

上述代码使用了 Formsy.InputFormsy.Select 这两类表单项,它们的基本 API 都很相似。其中 Formsy.Input 接受以下 props:

  • name - 表单项的名称。
  • type - 表单项的类型,例如 textemailpassword
  • value - 表单项的值。可以通过 state 控制该值,或直接设置默认值。
  • onChange - 该输入框的 change 事件处理函数。
  • required - 表示该项是否必填。
  • validationErrors - 设置对应验证失败的错误消息,例如 {required: '请填写用户名'}
  • validations - 该项的验证规则,例如 {isEmail: true}

更多表单项的类型请参考文档

除了表单项相关的 API,还有一些全局 API 可以调用。例如 Formsy.addValidationRuleFormsy.validationMessages 等,它们可以用来扩展验证规则和错误消息的定义。

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

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

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

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

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

上述代码定义了三种自定义验证规则,以及一种异步验证。如果我们需要更改全局的错误消息也可以通过设置 Formsy.validationMessages

总结

formsy-react-cp-fork 是一个非常优秀的表单管理工具,它在面对复杂和动态的表单时,能帮助我们更加方便地管理表单验证、数据收集等任务。在本文中,我们介绍了如何使用 formsy-react-cp-fork,以及如何添加自定义的验证规则和错误消息。阅读完这篇文章后,您可以基本上掌握该工具的使用方法,并能够在实际项目中使用它。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005597f81e8991b448d70e0

纠错
反馈