如何使用 Formik & Yup 进行表单验证

程序猿 • 2025年11月8日 07:33:44 • web前端 • 阅读 0

欢迎回来，编码员们！

今天，我们将在分步框架中使用名为“formik”的前端库与名为“yup”的模式构建器相结合，以帮助您理解和在 react 表单上实现验证。

formik 和 yup 是什么？

当我第一次开始学习 formik（并使用 yup）时，我对它没有信心，因为我不明白它的用途。因此，在开始分步过程之前，让我们确保我们在理解 formik 和 yup 是什么以及它们为何重要方面达成共识。
formik 是 react 中使用的一个库，其官方文档自豪地声明它允许您“在 react 中构建表单，无需流泪”（请参阅参考部分中的“*formik”）。该声明的真正含义是，formik 会跟踪值、验证、提交等，以节省您的时间并让您在心里跟踪代码中更重要的细节 (*formik)。
正如我之前提到的，yup 是一个模式构建器（也是一个库），允许您定义模式并与 formik 一起使用它来创建验证（*是的）。

好吧，现在我们来谈谈在 react 中使用 formik 和 yup 验证表单的步骤。

福米克和是的基础知识

在我们深入实践示例之前，让我们详细说明我们需要采取的步骤：

导入必要的库以使 formik 和 yup 运行。为我们的 yup 模式创建一个函数。在 formik 函数内部，定义初始值、验证模式和 onsubmit 指令。更新我们的 jsx 以使用 formik。

让我们开始吧！

formik 和 yup 分步指南

最近我构建了一个简单的目标跟踪器应用程序，并在“添加目标”表单中使用 formik 来验证用户摄入量并确保该值是长度在 1-20 个字符之间的字符串。
我将使用“添加目标”表单作为示例。
首先，这就是表单在用户界面中的样子：

现在您已经知道基本 ui 是什么样子了，让我们过渡到代码。
这就是我们开始的地方（没有任何 formik 或 yup）：

import react from "react";function addgoal({ handlegoal }){     return(                                                    

                                

                
                

                    
    )};export default addgoal

现在让我们实施上面概述的步骤：

1. 导入必要的库以使 formik 和 yup 运行。

在页面顶部附近，我们将导入所需的库：

import react from "react";import { useformik } from "formik";import * as yup from "yup";// rest of code

2. 为您的 yup 模式创建一个函数。

现在我们可以使用 formik 和 yup，我们将首先使用 yup 来创建验证（“添加目标”只有一个用户输入“目标”，但如果您有更多，则需要添加逗号他们之间）：

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })// rest of code

在上面的代码中，我们声明了一个变量“formschema”，并使用 yup 及其“object()”和“shape()”方法。这些方法基本上是在说“这是一个对象，它的‘形状’如下所示”。
在我们稍后将在对数据库的 post 请求中使用的“目标”键上，我们再次使用 yup 和以下方法来为用户输入创建验证：.string()、.required() 和.max().

虽然我们的代码在技术上还不能工作，但让我们暂时假装它可以工作，看看当我们尝试添加目标而不在输入表单中输入任何内容时会发生什么：

在这里我们可以看到验证触发了formschema的“.required()”部分并抛出了错误。

好吧，回到现实，我们还没有完成所有需要的事情来获得这些验证错误，如上图所示……让我们继续下一步。

3. 在 formik 函数中，我们将定义初始值、验证模式以及何时触发 onsubmit 的说明。

我们的待办事项列表中的下一步是创建一个名为“formik”的变量。在此变量内，我们将调用“useformik”挂钩并定义表单的初始值，调用 formschema 来定义 useformik 挂钩内的模式，使用新的用户值发出发布请求，最后重置形式.

让我们把这个过程分成几个部分：
1）首先，声明一个变量并为其分配 useformik 钩子：

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })    const formik = useformik({})    //rest of code

2）定义表单的初始值：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74 查看详情

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })    const formik = useformik({        initialvalues: {            goal: ""        },     })    //rest of code

（确保在初始值对象末尾包含逗号）。

3）添加validationschema键时使用formschema：

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })    const formik = useformik({        initialvalues: {            goal: ""        },        validationschema: formschema,    })    // rest of code

4）给 onsubmit 一个带有“values”和“{resetform }”参数的函数：

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })    const formik = useformik({        initialvalues: {            goal: ""        },        validationschema: formschema,        onsubmit: (values, { resetform })=>{}    })    // rest of code

在 onsubmit 中，我们将创建 post 请求（我们将不会在本文中详细介绍如何构建）。然而，在我们的第二个“.then()”中，我们将调用“resetform(‘’)”以便在用户提交表单后清除表单。

function addgoal({ handlegoal }){    const formschema = yup.object().shape({        goal: yup.string().required("please enter a goal with at least 1 character.").max(20)    })    const formik = useformik({        initialvalues: {            goal: ""        },        validationschema: formschema,        onsubmit: (values, { resetform })=>{            const configobj = {                method: 'post',                headers: {'content-type': 'application/json'},                body: json.stringify(values)            }            const url = `http://localhost:5555/goals`            fetch(url, configobj)            .then(r=>r.json())            .then(goalobj => {                handlegoal(goalobj);                resetform("");            })        }    })//rest of code

这就是你拥有的！我们已经完成了 formik 函数的创建！这只剩下我们最后一件事要做：

4.更新 jsx 以使用 formik
（我们更新前的 jsx :)

// previous codereturn(                                                    

                                

                
                

                    
    )};export default addgoal

让我们更新 jsx 中的以下项目：使用 formik 更新“onsubmit”：

// previous codereturn(                            // rest of code

（在我们的输入标签内）用 formik 更新“值”：

// previous codereturn(                                            // rest of code

（仍在我们的输入标签内）使用 formik 更新“onchange”：

// previous codereturn(                                            // rest of code

让我们回到本文前面演示验证错误的时候，并通过在

标签中创建样式错误来完成设置：

// Previous code    return(                                                    

                                

                {formik.errors.goal}
                

                    
    )};export default AddGoal

就是这样！我们刚刚演示了如何在代码中轻松创建 formik/yup 验证！

回顾：

如果您将来需要快速参考 formik 和 yup，请按照以下步骤正确验证表单：

1.导入必要的库以使 formik 和 yup 运行。

2.为您的 yup 模式创建一个函数。

3.创建一个调用 useformik 挂钩的函数。在钩子内部，定义：
1) 初始值.
2) 验证模式
3) onsubmit [给它一个带有“values”和{resetform}的函数。发出 post 请求并调用 resetform(“”) 来清除输入]。

4.更新您的 jsx 以使用 formik：
1) 在你的form标签中，将formik.handlesubmit添加到‘onsubmit’。
2) 在你的 input 标签中，将 formik.values.(goal) 添加到 ‘value’.
3) 在您的 input 标签中，将 formik.handlechange 添加到 ‘onchange’。
4) 创建一个 paragraph 标签，其样式为 formik.errors.(目标).

快乐编码！

参考

*福米克：https://formik.org/

*是的：https://www.npmjs.com/package/yup

flatiron school 的 phase-4 formik 和 form validation lesson 也被作者参考，但没有引用。有关 flatiron 学校的更多信息，请访问他们的网站。

以上就是如何使用 Formik & Yup 进行表单验证的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/471044.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

为 Nuxtjs 电子商务平台设计响应式模态和用户通知

上一篇 2025年11月8日 07:33:15

初级水平：在 React 中管理表单

下一篇 2025年11月8日 07:34:13

web前端

JavaScript中的空值合并运算符有哪些使用技巧？

空值合并运算符（??）用于安全处理 null 和 undefined，仅在左侧为 null 或 undefined 时返回右侧默认值。1. 可安全设置默认值，保留 0、false、空字符串等有意义的假值，如 const count = userInput ?? 10；2. 避免与 falsy 值混淆…

程序猿
2025年12月5日
1000
如何使用 CSS 使父容器内所有 DIV 横向排列且高度一致？

如何使用 css 使父容器内所有 div 横向排列且高度一致在 web 页面中，有时需要将父容器内的所有 div 横向排列，并保持相同的高度，而无需显式设置每个 div 的高度。这篇文章将介绍如何使用 css 实现这一效果，从而避免在内容增加时导致 div 高度不一致的问题。解决方案使用 fl…

程序猿
2025年12月3日 • web前端
1000
每个 UI 开发人员都应该知道的 Tailwind CSS Hacks

简介：释放 tailwind css 的力量嘿，ui 开发人员朋友们！您准备好将您的 tailwind css 技能提升到新的水平了吗？如果你点头，那你就大饱口福了。今天，我们将深入探讨 tailwind css 黑客世界，这不仅可以节省您的时间，还可以让您的编码体验更加愉快。 tailwind …

程序猿
2025年12月3日 • web前端
2000
CSS 中 box-shadow 报错：为什么 rgb() 函数设置透明度会失效？

css 中 box-shadow 设置阴影的报错分析有网友反馈，在修改导航栏样式时，为其添加 box-shadow 阴影效果时一直部署报错，注释掉该行代码后错误消失，不禁疑惑究竟问题出在哪里。根据提供的代码： header nav.navbar { height: 0px; //清除默认高度样式…

程序猿
2025年12月2日 • web前端
1000
如何将多个 SCSS 文件合并编译成一个 CSS 文件？

如何将多个 scss 文件合并编译成一个 css 文件？在 css 开发中，经常需要将多个 scss 文件合并成一个 css 文件，以方便不同页面间共享样式。有两种方法可以实现此目的：方法一：在 scss 文件中导入在其中一个 scss 文件中，使用 @import 语句导入所有要编译的 sc…

程序猿
2025年12月2日 • web前端
2000
ElementUI 树节点点击后，子节点选中但复选框未打勾如何解决？

elementui 树节点点击后，el-table子节点选中没有打勾这个问题是在使用 elementui 树状表格组件时遇到的。当点击树的父节点时，相应的子节点可以正常选中，但子节点的复选框中没有打勾。解决方案主要解决方式是： SciMaster 全球首个通用型科研AI智能体 156 查看详情…

程序猿
2025年12月2日 • web前端
0000
切换版本后配置参数不显示，如何彻底清除缓存？

如何彻底清除缓存您提到切换版本后，由于存在缓存，配置参数未显示。以下为一些常见方法来有效清除缓存：版本控制添加时间戳或随机数参数：在资源 url 后添加时间戳或随机数参数，强制浏览器加载新 url，避免获取缓存中的资源。修改文件名称：将 css、js 文件和图像等资源的文件名称更改为新名称，使…

程序猿
2025年12月2日 • web前端
0000
如何让 “ 和 “ 仅通过图标触发展开和收起？

如何控制 details、summary 的点击范围，只允许图标触发？在使用和创建树形结构时，默认情况下点击整行都会触发展开或关闭。为了只允许点击行最前面的图标才能触发，需要进行一些自定义。解决方案：在中添加一个额外的元素，并在该元素上阻止默认行为。为展开图标的元素设置一个更高的层级，…

程序猿
2025年12月2日 • web前端
0000
如何使用 JavaScript 模拟 CSS sticky 效果？

模拟 css 的 sticky 效果在某些情况下，我们希望在页面上实现类似 css sticky 的效果，在页面向下滚动时，某些元素可以固定在页面顶部或底部。虽然 css 中的 sticky 属性可以实现此效果，但它并不适用于所有浏览器。可以通过 javascript 来模拟这种 sticky 效…

程序猿
2025年12月2日 • web前端
3000
如何使用Webpack打包非入口文件中的 Tailwind CSS 样式？

配置webpack tailwindcss以打包非入口文件中的样式为了将non-entry文件中的tailwindcss样式被打包到新的css文件，需要对webpack tailwindcss的配置进行修改。在tailwind.config.js文件中，新增purge配置项，并添加需要被解析的文…

程序猿
2025年12月2日 • web前端
0000
如何用 CSS 实现图中所示的点线效果？

如何用 CSS 实现图中的点线效果？要实现图中所示的效果，可以按照以下步骤进行：放置元素首先，将元素水平排列并设置文本居中。这可以使用 text-align:center 属性来实现。创建横线最简单的创建横线的方法是使用上边框，但要注意第一个和最后一个元素的横线会缺一半。科威旅游管理系统…

程序猿
2025年12月2日 • web前端
1000
Ant Design Tooltip 三角型小箭头变方形的原因是什么？

tooltip 三角型小箭头变为方形的原因在使用 ant design 的 tooltip 组件时，当遇到 tooltip 中的三角小箭头变为方形的情况，原因可能是你不小心配置了一个 4px 的值作为 sizepopuparrow 属性，导致计算出错。 ant design 没有 8.4 版本，在…

程序猿
2025年12月2日 • web前端
0000
H5 活动页面按钮如何固定在背景图上适配不同分辨率？

活动页面按钮固定定位布局适配不同分辨率在 h5 活动页面中，使用按钮作为页面元素，如何确保不同机型和分辨率下按钮始终固定在背景图上的指定位置？解决方案尽管尝试了 rem、百分比和 px 等单位，但这些方法可能无法在所有情况下都实现固定定位。为了解决这个难题，提出两种方法：方法一：使用媒体查询…

程序猿
2025年12月2日 • web前端
0000
如何为合并行后的 el-table 实现悬停样式？

el-table 合并行依旧保持悬停样式针对 el-table 合并行时，无法为特定行提供悬停样式的问题，有两种实现方式：效果一：选中某行后，高亮整个合并行话袋AI笔记话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑 195 查看详情使用 clas…

程序猿
2025年12月2日 • web前端
1000
Vite 和 React 中，行内样式 backgroundImage 如何使用 @ 符号？

vite 搭配 %ignore_a_1% 行内样式 backgroundimage 中使用 @ 符号在 vite 和 react 中，行内样式中使用 backgroundimage 时，url() 中的路径通常会使用相对于当前模块的位置。为了将相对路径替换为使用 @ 符号的别名，需要使用一个额外的…

程序猿
2025年12月2日 • web前端
0000
Vite+React：如何用@符号定义行内样式中的backgroundImage URL？

vite+%ignore_a_1%：如何用@符号定义行内样式中的backgroundimage url 在react中，使用行内样式时，如何将backgroundimage url定义为@符号？为了在vite中使用@符号定义backgroundimage url，需要使用require函数或imp…

程序猿
2025年12月2日 • web前端
1000
如何用 vue-color 构建交互式颜色渐变页面？

如何让页面颜色渐变并支持交互？对于此类页面效果的实现，我们可以借助于vue-color库来打造调色板功能，满足调色需求。 vue-color库 vue-color是一款vue.js颜色选择器和调色板，拥有丰富的功能：立即学习“前端免费学习笔记（深入）”；提供hsva、hsla、rgba和十六进…

程序猿
2025年12月2日 • web前端
0000
如何实现Win10 设置界面鼠标移动特效（探照灯效果）？

探照灯效果：Win10 设置界面鼠标移动特效的实现前端开发中，实现鼠标悬停时显示周边样式（探照灯效果），可以通过 CSS 或替代方法来完成。使用 CSS CSS 中，可以使用 clip-path 属性创建一个圆形或椭圆形区域，并应用 transform 属性将其移动到鼠标位置。通过设置 poin…

程序猿
2025年12月2日 • web前端
2000
如何使用纯CSS绘制一个水滴形状？

css绘制水滴形状如何使用纯css绘制一个水滴形状？解决方案虽然可以调整border-radius属性来创建类似水滴的形状，但对于复杂的绘图，建议使用canvas或svg。立即学习“前端免费学习笔记（深入）”；纯css实现话袋AI笔记话袋AI笔记, 像聊天一样随时随地记录每一个想法，打…

程序猿
2025年12月2日 • web前端
2000
如何解决小红书模块中图片拉伸或裁剪问题？

无拉伸、无裁剪图片显示解决方案在制作类似小红书模块时，需要处理用户上传图片的尺寸差异，以避免拉伸或裁剪。处理方法：话袋AI笔记话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑 195 查看详情设定容器尺寸：设定一个限定图像大小的容器，例：宽度500…

程序猿
2025年12月2日 • web前端
1000

发表回复

登录后才能评论