原创投稿
  1. 创想鸟首页
  2. 用户投稿

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

程序猿 • • 用户投稿

欢迎回来，编码员们！

今天，我们将在分步框架中使用名为“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 个字符之间的字符串。
我将使用“添加目标”表单作为示例。
首先，这就是表单在用户界面中的样子：

add goal button

现在您已经知道基本 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().

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

finished form with validation error example
在这里我们可以看到验证触发了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 表单大师AI

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

表单大师AI 74 查看详情 表单大师AI 

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 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
马斯克预言：人工智能将全面替代工作，人类将不再需要工作
上一篇 2025年11月8日 07:33:43
OPPO MR Glass开发者版亮相：搭载骁龙XR2+平台，赋能XR联合创新
下一篇 2025年11月8日 07:33:47

相关推荐

  • 抖音粉丝多少可以开橱窗？抖音带货橱窗怎么开通 用户投稿

    抖音粉丝多少可以开橱窗？抖音带货橱窗怎么开通

    随着抖音短视频平台的快速发展，越来越多用户加入其中。在抖音生态中，粉丝数量是衡量账号影响力的重要标准之一。许多创作者希望通过开启橱窗功能实现盈利。那么，抖音粉丝达到多少才能开通橱窗呢？本文将为您解析开通橱窗的关键门槛。 一、抖音橱窗功能概述 抖音橱窗功能指的是创作者在平台上开设的线上展示窗口，通过该…

    程序猿的头像 程序猿
    2026年9月22日
    300
  • Java算术运算符优先级解析 用户投稿

    Java算术运算符优先级解析

    算术运算符优先级决定Java表达式执行顺序，、/、% 高于 +、-，同级从左到右计算，括号可改变顺序，如 (5+3)2=16；整数除法需注意类型，5/2*3 结果为 6。 Java中的算术运算符优先级决定了表达式中各个运算的执行顺序。理解这些优先级规则，能帮助开发者正确编写和解读复杂的数学表达式。 …

    程序猿的头像 程序猿
    2026年9月22日
    800
  • 移动端显卡性能释放对比：满血版RTX 4080 Laptop vs. 残血版 用户投稿

    移动端显卡性能释放对比：满血版RTX 4080 Laptop vs. 残血版

    移动端RTX 4080显卡的“满血版”与“残血版”核心区别在于功耗（TGP）释放，满血版可达175W，性能更强；残血版则被限制在百瓦以下，性能大幅缩水，选购时需关注具体功耗参数以避免被型号误导。 关于移动端显卡的“满血版”和“残血版”RTX 4080 Laptop对比，关键在于厂商对功耗（TGP）和…

    程序猿的头像 程序猿
    2026年9月22日
    300
  • Linux进程调度学习！ 用户投稿

    Linux进程调度学习！

    进程调度决定了哪个进程将被执行以及执行的时间，操作系统通过合理的进程调度实现资源的最大化利用。 在单片机上，常见的方式是系统初始化后进入 while(1){} 循环。当然，单片机也可以运行类似 FreeRTOS 的系统，从而实现进程切换。 在带有操作系统的 CPU 上运行的逻辑是允许多个进程（实际上…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • 电影评论区怎么加视频号？如何在手机上快速找到电影评论区的视频号？ 用户投稿

    电影评论区怎么加视频号？如何在手机上快速找到电影评论区的视频号？

    在观看电影时，不少用户喜欢通过评论区表达观点、分享感受。如果你有属于自己的视频号，不妨借此机会吸引更多志同道合的观众。许多人都好奇：如何在电影评论区巧妙植入自己的视频号？又该如何快速查找别人推荐的账号？本文将为你一一揭晓操作技巧，助你高效引流与互动。 一、如何在电影评论区添加视频号？ 目前，主流平台…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • win11打开图片的方式里找不到照片查看器怎么办_win11照片查看器缺失修复方法 用户投稿

    win11打开图片的方式里找不到照片查看器怎么办_win11照片查看器缺失修复方法

    首先通过修改注册表恢复传统照片查看器，若无效则重置或重新安装“照片”应用，最后可用PowerShell命令重新部署应用包并重启电脑。 如果您在右键菜单的“打开方式”中找不到传统的照片查看器，可能是由于系统更新后默认应用变更或相关组件被禁用。以下是恢复该功能的具体操作方法： 本文运行环境：Dell X…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • ​​VSCode高手才知道的骚操作！学会这些技巧开发快人一步​​ 用户投稿

    ​​VSCode高手才知道的骚操作！学会这些技巧开发快人一步​​

    掌握VSCode效率核心在于命令面板、自定义快捷键、多光标编辑、代码片段与扩展生态；通过减少鼠标依赖、实现快速跳转与自动化操作，构建专属高效开发环境，让注意力聚焦于代码思维而非工具操作。 VSCode里那些让你效率翻倍的“骚操作”，本质上是将开发流程中的重复性、高频操作进行极致的简化与自动化。它不是…

    程序猿的头像 程序猿
    2026年9月22日
    300
  • 夸克浏览器为什么会自动跳转到其他应用_夸克浏览器自动跳转应用原因 用户投稿

    夸克浏览器为什么会自动跳转到其他应用_夸克浏览器自动跳转应用原因

    1、检查链接是否含唤起协议，如intent://或weixin://；2、关闭夸克浏览器“智能打开App”功能；3、重置系统默认应用设置，确保夸克优先处理链接；4、更新或重装夸克浏览器以修复潜在问题。 如果您在使用夸克浏览器时发现页面点击后自动跳转到其他应用程序，这可能是由于浏览器与系统之间的协议调…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • PHP实时输出如何与消息队列集成_PHP实时输出与消息队列结合 用户投稿

    PHP实时输出如何与消息队列集成_PHP实时输出与消息队列结合

    答案：PHP通过消息队列解耦耗时任务与用户响应，利用flush()实现实时输出感知，结合RabbitMQ、Redis等队列将任务异步处理，前端通过轮询或SSE获取进度，提升系统性能与用户体验。 PHP 实时输出与消息队列的结合，关键在于解耦耗时任务和即时响应用户。虽然 PHP 本身是同步阻塞的，但通…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • 工信部批复：eSIM 手机业务全网开通，暂不支持线上方式 用户投稿

    工信部批复：eSIM 手机业务全网开通，暂不支持线上方式

    10 月 14 日消息，据 c114 通讯网报道，中国电信、中国联通与中国移动已于今日正式获得批准，可开展 esim 手机运营服务的商用试验。 根据三大运营商公布的相关信息，eSIM 手机服务将覆盖全国 31 个省、自治区及直辖市，并正式进入市场销售阶段。 需要注意的是，在此次商用试验阶段，暂不支持…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • CanvaPro中AI生成图片如何导出为PDF？快速保存图像的方法 用户投稿

    CanvaPro中AI生成图片如何导出为PDF？快速保存图像的方法

    在Canva Pro中导出AI生成图片为PDF，需先将图片添加至设计，点击“分享”→“下载”→选择“PDF标准”或“PDF打印”即可。2. PDF标准适用于在线分享，文件小、加载快；PDF打印适用于高质量印刷，支持300 DPI和CMYK色彩模式，确保色彩准确与细节清晰。3. 为保证AI图片导出质量…

    程序猿的头像 程序猿
    2026年9月22日
    100
  • 抖音橱窗带货真的能挣钱吗？橱窗带货到底赚不赚钱 用户投稿

    抖音橱窗带货真的能挣钱吗？橱窗带货到底赚不赚钱

    短视频平台已经深深融入人们的日常生活，而抖音作为其中的领军者，吸引了无数用户和商家的关注。近年来，“抖音橱窗带货”成为电商领域的新趋势，众多商家纷纷加入这一行列。那么，抖音橱窗带货真的能赚钱吗？本文将为你详细解析。 一、抖音橱窗带货的核心优势 庞大的用户基础：抖音月活跃用户已超过6亿，为商家提供了巨…

    程序猿的头像 程序猿
    2026年9月22日
    000

  • 怎样在iPhone情侣模式中管理消息通知？自定义提示音的技巧

    怎样在iPhone情侣模式中管理消息通知？自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知？自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知？自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知？自定义提示音的技巧

    答案：通过自定义提示音、专注模式和沟通策略管理情侣间消息通知。首先为情侣设置专属短信铃声，利用GarageBand制作个性化音效；其次在微信中为特定联系人开启消息免打扰或独立提示音；再通过iOS“专注模式”创建“情侣模式”，仅允许其通知，并设定自动启用时段；若遇不重要通知，可长按关闭或暂时静音联系人…

    程序猿的头像 程序猿
    2026年9月22日 • 用户投稿
    000
  • Laravel 文件上传：解决数据库存储物理路径而非可访问 URL 的问题 用户投稿

    Laravel 文件上传：解决数据库存储物理路径而非可访问 URL 的问题

    本教程旨在解决 laravel 文件上传后，数据库中存储文件物理路径而非可访问 url 的常见问题。通过分析 move() 方法的返回值，并引入 url() 辅助函数，我们将演示如何正确地将文件移动到指定目录，同时确保数据库记录的是可供前端访问的图片资源链接，从而避免图片无法正常显示。 在 Lara…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • PHP中操作JSON数组对象：添加与修改属性的实践指南 用户投稿

    PHP中操作JSON数组对象：添加与修改属性的实践指南

    本教程详细阐述如何在php中高效地处理包含对象的json数组。我们将学习如何利用`json_decode()`将json字符串转换为php数据结构，进而为数组中的现有对象添加或修改属性，并通过`json_encode()`将其转换回json字符串，避免手动构建json的常见错误。 在现代Web开发中…

    程序猿的头像 程序猿
    2026年9月22日
    1200
  • windows怎么更改计算机工作组_Windows计算机工作组修改方法 用户投稿

    windows怎么更改计算机工作组_Windows计算机工作组修改方法

    首先通过系统属性修改工作组名称，右键“此电脑”选择属性，进入高级系统设置的计算机名选项卡进行更改并重启；其次可用管理员命令提示符执行wmic命令批量配置，输入指定命令后重启生效；最后专业版用户可通过组策略编辑器，在启动脚本中添加指令实现自动加入工作组。 如果您需要将Windows计算机加入或更改到特…

    程序猿的头像 程序猿
    2026年9月22日
    000
  • 机械键盘轴体深度手感分析：线性轴、段落轴与提前段落轴 用户投稿

    机械键盘轴体深度手感分析：线性轴、段落轴与提前段落轴

    机械键盘手感取决于轴体类型，主流分为线性轴、段落轴和提前段落轴。线性轴直上直下顺滑连贯，代表如Cherry MX Red，适合游戏与快速输入；段落轴中程有明显阻力峰，提供清晰反馈，如Cherry MX Blue，适合文字工作；提前段落轴起步阻力大随后变轻，如TTC Gold Pink，防误触且节奏独…

    程序猿的头像 程序猿
    2026年9月22日
    000

  • Workerman开源库详解：快速搭建高并发服务器应用的实例分享

    workerman开源库详解：快速搭建高并发服务器应用的实例分享 引言：在IT领域，随着互联网的快速发展，高并发服务器应用的需求越来越大。为了满足这一需求，开发者们寻求各种方法和工具来搭建高效且具有良好扩展性的服务器应用。而Workerman作为一款PHP开源库，提供了快速搭建高并发服务器应用的解决…

    程序猿的头像 程序猿
    用户投稿 2026年9月22日
    000

  • 《零红蝶》重制版与原版对比截图 画面进化但有和谐

    《零红蝶》重制版与原版对比截图 画面进化但有和谐《零红蝶》重制版与原版对比截图 画面进化但有和谐《零红蝶》重制版与原版对比截图 画面进化但有和谐《零红蝶》重制版与原版对比截图 画面进化但有和谐

    之前光荣特库摩公开了恐怖游戏《零红蝶：重制版》，本作计划于2026年初发售，登陆ps5、xsx/s、steam以及switch2平台，并支持中文语言。近日，有网友晒出对比截图，将原版、wii版与即将推出的重制版进行了画面对比。 从图片可以看出，相较于原版和Wii版本，重制版在视觉表现上实现了巨大飞跃…

    程序猿的头像 程序猿
    2026年9月22日 • 用户投稿
    300
  • 实现Java双向路径搜索的正确方法 用户投稿

    实现Java双向路径搜索的正确方法

    本文旨在帮助开发者理解并正确实现Java中的双向路径搜索算法。通过分析常见的实现错误，我们将提供一种清晰、可行的解决方案，并详细解释如何构建完整的路径，克服单向搜索树的局限性，从而实现从起点到终点的完整路径搜索。 双向路径搜索是一种优化路径搜索效率的策略，它同时从起点和终点开始搜索，并在中间相遇。然…

    程序猿的头像 程序猿
    2026年9月22日
    900

发表回复

登录后才能评论
关注微信