npm 包 redux-form-create-validator 使用教程

引言

Redux-Form是一个针对React Redux项目的表单库，支持所有表单类型，并且基于Redux设计。Redux-Form的validator是一个负责表单输入合法判断和提示的工具。但是，对于一些复杂表单而言，它的validator会变得不够灵活和强大。redux-form-create-validator是一个基于Redux-Form的validator增强工具，通过自定义校验规则，实现表单验证的高度定制化和可配置化。本文将介绍如何使用这个npm包。

安装

使用npm进行安装：

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

基础用法

先看一下使用redux-form-create-validator的基础用法。首先，我们需要在redux-form中引入它，并定义一些自定义验证规则：

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

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

然后，在表单组件中使用这个validator：

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

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

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

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

这样，表单中的输入就经过我们定制的验证规则进行了检验。

表单验证

在上面的基础用法中，我们没有将验证结果反馈给用户。接下来，我们对表单的验证结果进行处理。为了简便，这里我们只展示验证失败的情况。

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

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

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

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

在这个例子中，我们使用errors属性将验证失败的信息反馈给表单使用者。这可以帮助我们在表单中直接呈现错误，增加用户体验。

高级用法

在实现高级验证时，我们需要用到额外的验证规则和自定义表单元素。我们在项目中使用到的一个高级验证需求：五个checkbox至少选择一项。这里，我们要用到自定义表单元素和额外的验证规则。

首先，定义我们的自定义表单元素：

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

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

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

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

我们需要在自定义组件中进行一些和redux-form相关的属性和方法绑定。这里，我们使用input属性传递了表单元素的值，并通过onChange方法更新表单值。其他属性和方法的含义，可以在doc中查找。

然后，定义自定义规则：

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

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

这里，我们定义了一个名为checkboxGroup的验证规则，它用于验证五个checkbox中至少选择一项的情况。我们用自定义函数实现了这个验证规则。

最后，我们在表单组件中使用自定义的表单元素和自定义的验证规则：

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

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

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

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

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

这里，我们引入了自定义的表单组件，并在表单组件中使用了它。并引入了自定义的验证规则，也在表单组件中使用了它。达到了实现复杂表单验证的目的。

总结

redux-form-create-validator是一个基于Redux-Form的validator增强工具，通过自定义校验规则，实现表单验证的高度定制化和可配置化。本文详细介绍了如何使用这个npm包，包括基础用法、表单验证和高级用法。通过本文的学习，你可以更好地理解和应用redux-form-create-validator，并改进你的表单验证流程。

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

阅读全文

猜你喜欢

  • npm 包 ssh2-extra-ciphers 使用教程

    SSH 是一种常用的远程登陆协议，通常用于各种服务器管理，SCP，SFTP 等文件传输，以及远程端口转发等功能。现在，npm 上有一个名为 ssh2-extra-ciphers 的包，可以使 SSH ...

    4 年前
  • npm 包 ssh2-multiplexer 使用教程

    前言 在前端开发中，我们经常需要在服务器上执行一些命令，如上传文件、执行脚本等等，这时就需要用到 SSH 连接。虽然 Node.js 已经自带了 SSH 客户端和服务器，但并不方便使用，使用起来比较麻...

    4 年前
  • npm 包 `squuid` 的使用教程

    简介 squuid 是一个用于生成短、轻量级、易读的 UUID 的 npm 包。其使用 TypeScript 开发，保证了代码的可维护性和可扩展性。本文将介绍如何使用 squuid 生成 UUID，以...

    4 年前
  • npm 包 sqwiggle-node 使用教程

    前言 在日常的前端开发中，我们经常会用到第三方的库来提升我们的开发效率。而 npm 包则是前端开发者使用最多的库之一。其中，sqwiggle-node 这个 npm 包则是一个非常有用的工具，能够方便...

    4 年前
  • npm 包 sqwk 使用教程

    什么是 sqwk sqwk 是一款高效的前端监控工具，可用于记录网站每位访客的行为，分析用户使用行为以及检测异常行为，从而帮助开发人员快速定位和解决问题。 安装 sqwk 在终端中，使用以下命令安装 ...

    4 年前
  • npm 包 sr-condition-wercker 使用教程

    在前端开发过程中，随着项目的复杂度不断提高，我们需要使用许多工具来帮助我们完成开发任务。其中，npm 包是一个非常有用的工具，它可以让我们轻松地引入、管理和使用 JavaScript 库。

    4 年前
  • npm 包 sqlizr 使用教程

    npm包sqlizr使用教程 随着Web页面逐渐多样化，大量的动态数据展示和数据交互需求使得前端需要更灵活、高效的数据处理方案。而sqlizr就是一种在前端使用SQL语句进行数据处理的解决方案。

    4 年前
  • 使用 npm 包 SpringNodeJSExample 制作前端应用

    在前端开发过程中，我们经常需要使用一些 npm 包来解决我们的问题，而 SpringNodeJSExample 是一个非常有用的 npm 包，它提供了一些基础的后端支持来帮助我们在前端应用中完成一些复...

    4 年前
  • npm 包 springtunes 使用教程

    介绍 SpringTunes 是一个集成了音乐和视频播放器的 React 组件库，旨在为开发者提供简单易用但功能丰富的播放器组件。它兼容所有的主流浏览器，支持多种音频和视频格式，并提供了自定义样式、事...

    4 年前
  • npm 包 springuper-winston 使用教程

    本文将介绍 npm 包 springuper-winston 的使用教程。springuper-winston 是一个基于 winston 的日志管理系统，可以方便地将日志存储到 Elasticsea...

    4 年前
  • npm 包 ssh2-config 使用教程

    介绍 ssh2-config 是一个 npm 包，用于读取和解析 OpenSSH 配置文件（常见在 macOS 和 Linux 等操作系统上），并生成已解析的配置对象，使其能够在 ssh2 和其他使用...

    4 年前
  • npm 包 ssh2-auth 使用教程

    前言 随着互联网和移动互联网的发展，前端工程师已经不再只是写一些简单的 HTML、CSS 和简单的 JavaScript 脚本，而是需要使用最新的技术和库来构建大型 Web 应用。

    4 年前
  • npm 包 ssh2-executor 使用教程

    在前端开发中，随着项目的不断增长，很多时候需要进行远程服务器操作，例如自动化部署、快速升级等。而在这样的场景下，我们需要一种工具来帮助我们方便地进行远程服务器操作。

    4 年前
  • npm 包 sprinkles-ui 使用教程

    随着 Web 技术的不断发展，前端工程师的工作变得更加复杂和繁琐。其中，UI （User Interface）设计是一个重要的领域，可以直接影响用户的使用体验。因此，许多公司和开发者为了方便快捷地创建...

    4 年前
  • npm 包 ssh2-client 使用教程

    在 Web 开发中，很多场景都需要使用 SSH2 进行连接和传输文件。而 node.js 中一个重要的 NPM 包，ssh2-client，可以非常方便地实现 SSH2 的连接和操作。

    4 年前
  • npm 包 sqlm 使用教程

    介绍 sqlm 是一个针对前端的 SQL 查询库，它使用 Promise 风格调用 API，可以进行命令式 SQL 查询构建，同时支持参数化查询和无需要预编译的查询。

    4 年前
  • npm 包 sqlnosql 使用教程

    SQL NoSQL 是一款简单易用的 npm 包，它可以用于在任何 JavaScript 应用程序中快速查询、插入、更新、删除 SQL 和 NoSQL 数据库。 在本文中，我们将详细介绍如何使用 SQ...

    4 年前
  • npm 包 sqlobj 使用教程

    前言 在 Web 前端开发中，我们经常需要与后端数据库进行交互。针对这一需求，现有的数据库管理系统不够方便，因此出现了一些第三方封装库来方便前端工程师进行数据库交互。

    4 年前
  • npm 包 sqljs 使用教程

    什么是 sql.js？ sql.js 是一个 JavaScript 实现的 SQLite 数据库。它可以让我们在浏览器环境下使用 SQLite 而无需安装任何软件或插件，同时也可以在 Node.js ...

    4 年前
  • npm 包 ts-eventsourcing 使用教程

    在前端开发中，事件溯源是一种流行的设计模式，它可以记录应用程序的状态变化，并将这些变化保存在事件日志中。这种设计模式有助于开发人员更好地理解应用程序的状态及其历史记录。

    4 年前

相关推荐

    暂无文章