在一个交互式的网页应用程序中,表单是用户交互的重要捷径。表单通过收集用户提供的配置信息来控制应用程序的行为。在 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