React 之表单验证及优化

在前端开发中，表单验证是非常常见的需求，同时也是一个比较繁琐的任务。React 的状态管理机制使得表单验证可以更为方便和简单，同时还可以通过优化来提升用户体验。接下来将详细介绍 React 中如何进行表单验证及优化。

表单验证

常规表单验证

对于常规表单验证，可以通过 React 的 state 和 setState 来管理表单数据和验证状态。具体实现如下：

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

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

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

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

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

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

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

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

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

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

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

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

在该例子中，我们使用了 state 来管理表单数据和验证状态，同时使用 validate 函数验证表单数据。通过 handleChange 函数，每当表单内容变化时，我们调用 setState 来更新 state 中的对应数据。在 handleSubmit 函数中，我们通过 validate 函数来判断表单数据是否符合要求，如果符合要求，则向服务器提交表单数据。

在 validate 函数中，我们对表单数据进行了校验。如果校验不通过，则通过 setState 设置相应的错误信息，并返回 false。反之，则返回 true。

表单验证插件

对于大型表单或者更加复杂的验证规则，手动编写表单验证逻辑可能会比较繁琐。在此情况下，我们可以选择使用一些表单验证插件，如 Formik、React Hook Form 等。这些插件可以帮助我们更加便捷地处理表单验证的逻辑。以 Formik 为例，我们可以参考以下示例代码：

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

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

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

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

在上述示例代码中，我们使用了 Formik 插件来处理表单验证逻辑。首先，我们定义了一个 SignupSchema，该变量指定了表单验证的规则。然后，在 <Formik> 组件中，我们设置了表单的 initialValues 和 validationSchema，并指定了 onSubmit 回调函数。

在组件内部，我们使用了 <Field> 组件来处理表单输入，通过 name 属性指定了对应的数据名。同时，在每个输入框下方，我们使用了 <ErrorMessage> 组件来渲染错误信息。

更多 Formik 的使用方法可以参考官方文档。

表单优化

在进行表单优化时，我们可以考虑以下几个方面：

Lazy Validation

在使用表单验证插件时，一些插件会自动做一些表单数据的校验，这可能会对页面的性能产生一定的影响。这时，我们可以考虑使用懒校验（Lazy Validation）来提升性能。

懒校验即在用户提交表单时再进行校验。在这种方式下，我们需要将表单的 onSubmit 回调函数修改为以下形式：

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

其中，我们使用了 setSubmitting 函数来通知插件表单正在提交，防止用户多次点击提交按钮。在此同时，我们通过 await new Promise(resolve => setTimeout(resolve, 500)) 函数延迟了表单提交，这样可以给用户更多的暂停时间来检查输入的内容。同时，使用 async/await 可以更便捷地处理表单提交之后的逻辑。更多关于 Formik 的懒校验可以参考官方文档。

交互反馈

在表单验证时，我们可以考虑给用户提供一些更加友好的交互反馈。比如，在用户提交表单之后，给出一些 loading 状态的提示，防止用户重复提交；在用户输入错误时，给出提示信息等。

我们可以使用一些 UI 库来渲染这些交互反馈。比如 Ant Design、Material UI 等。以 Ant Design 为例，我们可以使用 Spin 和 message 组件来渲染状态提示信息：

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

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

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

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

在上述示例代码中，我们使用了 Ant Design 的 Spin 组件来渲染 isSubmitting 状态，同时使用了 message 组件来渲染提交成功的信息。

总结

在本文中，我们介绍了 React 中的表单验证和优化，并提供了详细的示例代码。通过本文的学习，读者可以更加灵活地处理表单验证和优化问题，为用户带来更好的用户体验。

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

阅读全文

猜你喜欢

  • ECMAScript 2017 中 URLSearchParams 对象如何处理 URL 查询字符串

    在浏览器和 Node.js 中，我们都经常需要处理 URL 查询字符串。而在 ECMAScript 2017 中，新增了一个针对 URL 查询字符串的对象，即 URLSearchParams。

    1 年前
  • Kubernetes 监控：Prometheus 与 Grafana

    随着云原生技术的发展，Kubernetes 作为一个流行的容器编排平台，越来越受到企业的青睐。Kubernetes 强大的功能使得它可以管理、部署和调度容器，同时也能够监控应用程序的运行状况，以便于迅...

    1 年前
  • ECMAScript 2016（ES7） 的 Proxy 和 Reflect 对象详解

    在 ECMAScript 2016（简称 ES7）的更新中，一些新的特性得到了添加。其中，最引人注目的特性莫过于 Proxy 和 Reflect 对象。 Proxy 是一个新的构造函数，可以在访问对象...

    1 年前
  • RxJS 中的合并、拆分和转换操作符的使用

    在前端开发中，我们经常会遇到需要处理异步数据流的情况。RxJS 是一个基于事件流或数据流的响应式编程库，通过对数据流的处理和过滤可以帮助我们实现更加优雅和可维护的代码。

    1 年前
  • ES10 之 String.trimStart() 和 String.trimEnd() 方法详解

    ES10 是 JavaScript 的最新版本，在其中，有两个新的字符串方法 String.trimStart() 和 String.trimEnd() 被添加了进去。

    1 年前
  • Next.js 如何使用 styled-components 样式化组件

    如果你是一个前端开发人员，那么你可能已经听说过 Next.js 和 styled-components。Next.js 是一个用于构建 SSR(服务器端渲染) React 应用程序的框架，而 styl...

    1 年前
  • Express.js 中 RESTful API 的设计和实现

    什么是 RESTful API？ RESTful API 是一种 Web API 设计风格，提供了一组用于访问 Web 资源的约束和属性。RESTful API 是一种轻量级、灵活、可扩展的 Web ...

    1 年前
  • Mongoose 的保存操作报错问题解决方法

    在使用 Mongoose 进行 MongoDB 数据库操作时，经常会出现保存操作报错的情况。这种情况很常见，但是却需要我们花费一定的时间和精力来解决。在本文中，我们将介绍常见的 Mongoose 保存...

    1 年前
  • 利用 Promise.all 实现批量请求接口

    随着 Web 技术的不断发展，前端应用的复杂度也越来越高。在许多前端应用中，需要批量请求接口并处理返回的数据。这时，利用 Promise.all 可以很好地实现这一需求。

    1 年前
  • Angular 中如何使用 @Directive 装饰器创建自定义指令

    Angular 中如何使用 @Directive 装饰器创建自定义指令 在 Angular 中，我们可以使用 @Directive 装饰器来创建自定义指令。通过创建自定义指令，我们可以扩展 HTML ...

    1 年前
  • React Native 使用 Redux 遇到的问题及解决方案

    前言 React Native 作为一款跨平台的移动应用开发框架，已经成为了许多移动应用的首选。在使用 React Native 进行开发时，我们往往需要使用到数据管理库 Redux，来帮助我们更好地...

    1 年前
  • ECMAScript 2021 中的 Logical Assignment Operators：让代码更精简易读

    在 ECMAScript 2021 中，有一种新的操作符被加入到了语言规范里，那就是 Logical Assignment Operators（逻辑赋值运算符）。这些新的操作符使用起来非常方便，可以让...

    1 年前
  • Mocha 的 “xit” 和 “xdescribe” 使用方法和作用

    Mocha 是一个流行的 JavaScript 测试框架，被广泛应用于前端项目中。在使用 Mocha 进行单元测试的过程中，我们经常会遇到需要禁用某个测试用例或测试套件的情况。

    1 年前
  • JavaScript 中的内存管理和垃圾回收的基本原理

    在 JavaScript 中，内存管理和垃圾回收是非常重要的。如果我们不了解这些基本原理，代码可能会出现内存泄漏或其他性能问题。本文将介绍 JavaScript 中的内存管理和垃圾回收的基本原理，包括...

    1 年前
  • 如何在 Tailwind CSS 中添加自定义字体：设计思路与实现方法

    前言 在前端开发中，字体是一个非常重要的设计要素。而 Tailwind CSS 是前端开发中非常受欢迎的 CSS 框架之一。它提供了众多的 CSS 类名，方便开发者快速构建页面样式。

    1 年前
  • Enzyme：React Native 单元测试的完美解决方案

    React Native 在移动应用开发中的应用越来越广泛，而单元测试作为保证应用质量的重要环节也变得越来越重要。在 React Native 单元测试中，Enzyme 是一个被广泛使用的测试库，拥有...

    1 年前
  • Flexbox Layout: 12 个例子演示前端排版神器

    Flexbox 布局（Flexbox Layout）是现代 Web 开发中非常重要的一种布局方式。它可以帮助我们实现多种排版效果，比如水平居中、垂直居中、自适应布局等。

    1 年前
  • 无需任何代码实现 GraphQL Schema 的管理

    GraphQL 是一种用于 API 的查询语言。它的一个很大的优点是可以通过 Schema 定义数据模型，方便地管理、查询、过滤数据。但是，对于非常小的项目或者一些还不知道应该如何设计 Schema ...

    1 年前
  • Deno 中的 WebSocket 错误：ERR_INVALID_ARG_TYPE

    WebSocket 是一种在客户端和服务器之间实时交换数据的通信协议。对于前端开发人员来说，学习 WebSocket 是非常必要的，因为它可以为我们提供高效且实时的数据交换方式。

    1 年前
  • Webpack 4 升级指南和注意事项

    Webpack 是一个非常流行的前端打包工具，它可以将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件，以便于在浏览器中使用。Webpack 4 是最新的版本，它与 Webpa...

    1 年前

相关推荐

    暂无文章