使用 Formik 进行表单验证，是的

joypaul110

表单是用户与我们的网站和网络应用程序交互方式不可或缺的一部分。验证用户通过表单传递的数据是我们作为 Web 开发人员工作的一个重要方面。然而，这并不一定是一个痛苦的过程。在本文中，我们将了解 Formik 如何处理表单数据的状态、验证数据以及处理表单提交。
作为开发人员，我们的工作是确保当用户与我们设置的表单交互时，他们发送的数据采用我们期望的形式。

在本文中，我们将学习如何在不借助表单库的情况下处理表单验证并跟踪表单的状态。接下来，我们将了解 Formik 库的工作原理。我们将了解如何将其与 HTML 输入字段和自定义验证规则一起增量使用。然后我们将使用 Yup 和 的自定义组 加拿大电话号码表 件设置表单验证，并了解 Yup 如何与  很好地配合处理表单验证。我们将实现这些表单验证方法来验证我设置的简单注册表单。

注意： 本文需要对 React 有基本的了解。

在这里，我们将辅助函数传递handleChange给输入的onChange属性。我们将输入的值链接到formValues对象，使它们成为受控输入。从 React 文档来看，受控输入是其值由 React 控制的输入。如果存在与该特定输入字段相关的任何错误，则应用输入错误样式。如果存在与特定输入字段相关的任何错误，则有条件地在每个输入下方显示一条错误消息。最后，我们检查错误对象中是否有任何错误以及是否isSubmitting为 true。如果这些条件成立，我们将显示一条消息，通知用户登录成功。



有了这个，我们就可以在没有图书馆帮助的情况下建立一个功能齐全且经过验证的表单。然而，像Formik这样的表单库在Yup的帮助下可以为我们简化处理表单的复杂性。Formik 是一个灵活的库。它允许您决定何时使用以及使用多少。我们可以控制使用 Formik 库的功能量。它可以与 HTML 输入字段和自定义验证规则一起使用，或者是的及其提供的自定义组件。Formik 让表单验证变得简单！当与 Yup 结合使用时，它们抽象了 React 中处理表单的所有复杂性。

是的，它是一个 JavaScript 对象模式验证器。虽然它具有许多强大的功能，但我们将重点关注它如何帮助我们创建自定义验证规则，这样我们就不必这样做。这是注册表单的示例 Yup 对象架构。我们将在本文后面深入探讨是的及其工作原理。