在 React 中如何进行表单验证?

在一个交互式的网页应用程序中,表单是用户交互的重要捷径。表单通过收集用户提供的配置信息来控制应用程序的行为。在 React 中,表单是一种神奇的构造。因为 React 是一个基于组件的库,所以可以轻松地将表单拆分为子组件。这样做的好处是可以简化代码,并且使更改和调试变得更加容易。

表单验证是确保表单中输入数据的正确性和完整性的过程。当我们讨论表单验证时,最常见的表单验证是客户端表单验证。客户端表单验证是在表单数据提交到服务器之前使用 JavaScript 在客户端上进行的验证。

在本文中,我们将学习如何在 React 中实现表单验证。

必要性

表单验证是非常重要的,对用户以及应用程序来说都是必要的。如果没有表单验证,应用程序将不再安全。仅使用客户端表单验证是不够的,服务器端也需要验证数据。

客户端验证约束很容易在开发中添加,但容易被绕过。如果数据通过编写的客户端验证函数,则不一定是有效和安全的。因此,我们应该始终在服务器端应用程序中进行数据检查。

React 中的表单验证

React 提供了很多有用的工具来促进表单验证。当然,表单验证可以用类似于传统 HTML 表单的方法来处理。通过在表单上添加属性和验证函数,我们可以手动验证表单数据。

然而,在 React 中,我们可以使用 Formik 库来处理表单验证,这使得表单验证变得更加轻松。使用 Formik 不需要编写很多重复的代码,并且可以与其他 React 应用程序集成。

下面是一个使用 Formik 实现表单验证的例子:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在此示例中,我们使用了 Formik 和 Yup 库,以及 Field 和 ErrorMessage 组件。我们定义了三个验证功能(validateEmail, validatePassword, validateRepeatPassword),以确保我们的表单数据具有正确格式。我们将这些功能传递给每个字段的 validate 属性。

当表单提交时,我们使用 onSubmit 函数来处理我们的数据。如果表单数据无效,我们将收集的错误传递给客户端。

结论

表单验证是任何交互式网页应用程序中的不可或缺的部分,React 使它易于实现和维护。使用 Formik 和 Yup 等库可以使 React 表单验证更加容易和灵活。在实施表单验证时,我们必须始终牢记客户端验证不足以验证数据的完整性和安全性。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671cc3939babaf620fb25ddb