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

程序猿 • 2025年11月8日 07:33:44 • 用户投稿 • 阅读 2

欢迎回来，编码员们！

今天，我们将在分步框架中使用名为“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 粉丝

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

马斯克预言：人工智能将全面替代工作，人类将不再需要工作

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

OPPO MR Glass开发者版亮相：搭载骁龙XR2+平台，赋能XR联合创新

下一篇 2025年11月8日 07:33:47

用户投稿

电脑怎么测试php源码_电脑测试php源码环境与调试法【指南】

首先安装XAMPP等集成环境，将PHP文件放入htdocs目录，通过浏览器访问即可运行；接着用echo、错误报告或Xdebug进行调试，配合VS Code和Postman提升开发效率。想在电脑上测试 PHP 源码，关键在于搭建本地运行环境并掌握基础调试方法。只要配置好工具，写和测 PHP 代码就跟…

程序猿
2025年12月13日
1000
用户投稿

AWS EC2实例间SQL Server连接超时：安全组配置深度解析

在aws ec2环境中，即使两台实例属于同一安全组，也可能因安全组配置不当导致sql server连接超时。核心问题在于安全组规则是应用于单个资源而非组内自动互通。本文将详细阐述这一常见误区，并提供最佳实践，通过合理配置独立的安全组及其相互引用规则，确保应用服务器与数据库服务器之间实现安全、高效的s…

程序猿
2025年12月13日
0000
用户投稿

php文件怎么转成mp3

PHP文件不能直接转成MP3，因其为服务器端脚本；若文件实为被重命名的音频，可改回.mp3后缀；若需文字转语音，可通过PHP调用TTS API生成MP3；若有音频数据，可用PHP调用FFmpeg转换格式。 PHP 文件是服务器端脚本文件，通常用于网页开发，它本身不包含音频内容，因此不能直接转换成 M…

程序猿
2025年12月13日
0000
用户投稿

云路php解密怎么样_用云路解密工具解密php文件评测教程【技巧】

云路PHP解密工具可解析Zend、ionCube等加密类型，需先识别加密方式，再导入文件选择对应模式解密，自动分析后需手动修复语法错误、重命名混淆变量，并用DeZender等工具交叉验证，结合VLD查看opcode辅助理解执行流程。如果您在处理加密的PHP文件时遇到困难，可能是因为代码被混淆或使用…

程序猿
2025年12月13日
1000
用户投稿

加密php怎么解密_用PHP匹配加密算法逆向解密文件教程【技巧】

首先定位加密代码中的动态执行函数如eval、assert等，提取被编码的字符串；接着根据编码方式（如base64、gzinflate、异或等）逐层逆向解码，使用测试脚本还原；若存在函数名混淆，则通过映射数组替换真实函数名；对于依赖运行时环境的加密逻辑，可修改代码将解密后的内容输出到文件，最终获得可读…

程序猿
2025年12月13日
0000
用户投稿

php源码已经上传了怎么办_处已上传php源码方法

1、设置PHP文件权限为644、目录为755；2、确认服务器安装PHP并配置正确解析规则；3、修改config.php等文件中的数据库连接信息；4、删除install.php、readme.txt等敏感文件；5、关闭错误显示并启用日志记录，确保安全与调试兼顾。如果您已经上传了PHP源码，但需要进一…

程序猿
2025年12月13日
0000
用户投稿

使用.htaccess配置URL别名：隐藏目录路径的专业教程

本教程详细指导如何在wordpress环境中，利用apache的`mod_rewrite`模块和`.htaccess`文件为url路径创建简洁的别名，从而有效隐藏后端文件目录的真实路径。通过修改前端链接和配置`rewriterule`指令，我们能提升网站的安全性、美观度及用户体验，并避免常见的重写冲…

程序猿
2025年12月13日
0000
用户投稿

php怎么查找源码_php源码查找位置与搜索方法

可通过命令行grep、IDE全局搜索、Composer路径映射或PHP反射类四种方式定位PHP源码。1、使用grep -r “关键词” ./ –include=”*.php” 搜索文件内容；2、在PhpStorm双击Shift或VS Cod…

程序猿
2025年12月13日
0000
用户投稿

php网页源码怎么打开_php网页源码打开查看与编辑法【教程】

可通过文本编辑器、IDE、本地服务器或命令行打开和修改PHP文件。1、用Notepad++等工具可直接查看代码；2、使用PhpStorm等IDE支持智能编辑；3、通过XAMPP运行文件并浏览器访问localhost查看效果；4、终端用cat或type命令快速读取内容。如果您想查看或修改一个PHP网…

程序猿
2025年12月13日
0000
用户投稿

怎么解密php源码_php源码解密工具与还原步骤解析【技巧】

解密PHP源码需先识别加密类型，再按Base64/gzinflate手动还原、用在线工具解析、授权下处理ionCube加密，或通过VLD扩展分析opcode重建逻辑。如果您发现下载的PHP源码被加密或混淆，导致无法直接阅读或修改，则可能是使用了编码或加密工具对代码进行了保护。以下是解密此类PHP源…

程序猿
2025年12月13日
0000
用户投稿

PHP浮点数计算与取模操作中的精度陷阱及解决方案

本文深入探讨了php中浮点数运算与取模操作时可能遇到的精度问题。由于计算机内部对浮点数的二进制表示方式，导致 `0.29 * 100` 等运算结果可能并非精确的 `29.0`，而是微小的近似值。当对这些近似值执行取模 (`%`) 操作时，php会进行隐式类型转换，截断小数部分，从而产生非预期的结果。…

程序猿
2025年12月13日
0000
用户投稿

php中shuffle()函数的用法

shuffle() 用于随机打乱数组顺序，原数组被直接修改且键名重置为数字索引，成功返回 true，失败返回 false，仅适用于索引数组，常用于抽奖或随机推荐场景。 shuffle() 是 PHP 中用于随机打乱数组元素顺序的内置函数。它会将原数组的元素重新排列，并返回一个布尔值表示是否操作成功。…

程序猿
2025年12月13日
0000
用户投稿

WebService接口在PHP中的使用

PHP调用WebService主要使用SoapClient类，支持WSDL和非WSDL模式。2. WSDL模式下直接传入WSDL地址可自动获取方法信息，推荐使用。3. 调用时参数通常为关联数组，键名需与WSDL定义一致。4. 可通过__soapCall方法手动指定操作名、参数及命名空间，提升控制力。…

程序猿
2025年12月13日
0000
用户投稿

PHP通过Ajax安全高效地传递JSON数据到JavaScript的最佳实践

本文详细阐述了如何通过php结合ajax将数据库查询结果以json格式安全高效地传递给javascript。核心在于php端利用json_encode()函数将数据结构转换为标准json字符串，并设置content-type: application/json响应头；javascript端通过jqu…

程序猿
2025年12月13日
1000
用户投稿

DocuSign API：获取信封取消或拒绝原因的详细教程

本文详细阐述如何通过docusign api获取信封被取消或签署人拒绝的具体原因。不同于简单的getenvelope调用，获取此类详细信息需要查询信封的审计追踪（audit trail）。教程将指导您如何调用相关api获取审计事件列表，并从中解析出信封取消或拒绝的事件及其附带的原因。理解DocuS…

程序猿
2025年12月13日
0000
用户投稿

php源码怎么更改_用编辑器修改PHP源码内容教程【技巧】

答案：修改PHP源码需选用专业编辑器并配置语言支持，定位目标文件后备份再编辑；通过搜索关键字修改变量或函数逻辑，添加新代码时注意命名规范与位置；最后保存更改并验证页面运行状态，检查错误日志确保语法正确。如果您需要对PHP源码进行修改以实现特定功能或修复问题，可以通过代码编辑器直接操作源文件。以下是…

程序猿
2025年12月13日
1000
用户投稿

php怎么显示源码_php源码显示输出与调试查看

答案：可通过highlight_string()显示PHP源码，用file_get_contents()和highlight_file()读取外部文件，结合var_dump()与print_r()调试变量，启用error_reporting()查看错误，或使用Xdebug扩展增强调试。如果您在开发…

程序猿
2025年12月13日
0000
用户投稿

怎么找到php源码_php源码定位搜索与检索技巧

可通过系统化方法快速定位PHP源码：一、用编辑器全局搜索功能查找关键词；二、使用grep命令递归检索PHP文件；三、通过debug_print_backtrace()逆向追踪调用栈；四、利用IDE符号跳转与引用查找功能；五、构建ctags索引实现高效导航。如果您在调试或分析PHP项目时需要快速找到…

程序猿
2025年12月13日
0000
用户投稿

怎么扒php源码_用工具抓取PHP网站源码教程【技巧】

无法直接获取PHP源码，但可通过抓取前端代码、分析网络请求、探测泄露文件、逆向API接口及调试技术间接分析。1. 用HTTrack等工具下载网站静态资源；2. 浏览器开发者工具查看Network和Sources，分析XHR请求与JS逻辑；3. 尝试访问index.php.bak等备份文件，使用Gob…

程序猿
2025年12月13日
0000
用户投稿

php的源码怎么查看_php源码查看编辑器与定位技巧【教程】

使用专业工具如VS Code或PhpStorm，结合GitHub获取php-src源码并切换至指定版本，通过grep或IDE功能搜索函数定义，熟悉ext、Zend等目录结构，利用GDB调试分析调用栈，高效定位与理解PHP源码实现。如果您想深入理解PHP代码的运行机制或调试复杂问题，直接查看和分析P…

程序猿
2025年12月13日
1000