欢迎回来，编码员们！
今天，我们将在分步框架中使用名为“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）定义表单的初始值：
一套面向小企业用户的企业网站程序！功能简单，操作简单。实现了小企业网站的很多实用的功能，如文章新闻模块、图片展示、产品列表以及小型的下载功能，还同时增加了邮件订阅等相应模块。公告，友情链接等这些通用功能本程序也同样都集成了！同时本程序引入了模块功能，只要在系统默认模板上创建模块，可以在任何一个语言环境（或任意风格）的适当位置进行使用！
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 code
return(
)
};
export default addgoal
- 让我们更新 jsx 中的以下项目： 使用 formik 更新“onsubmit”：
// previous code
return(
相关专题
更多
string转int
在编程中，我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算，或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。
315
2023.08.02
js 字符串转数组
js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。
254
2023.08.03
js截取字符串的方法
js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。
206
2023.09.04
java基础知识汇总
java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友，请阅读本专题下面的的有关文章，欢迎大家来php中文网学习。
1463
2023.10.24
字符串介绍
字符串是一种数据类型，它可以是任何文本，包括字母、数字、符号等。字符串可以由不同的字符组成，例如空格、标点符号、数字等。在编程中，字符串通常用引号括起来，如单引号、双引号或反引号。想了解更多字符串的相关内容，可以阅读本专题下面的文章。
617
2023.11.24
java读取文件转成字符串的方法
Java8引入了新的文件I/O API，使用java.nio.file.Files类读取文件内容更加方便。对于较旧版本的Java，可以使用java.io.FileReader和java.io.BufferedReader来读取文件。在这些方法中，你需要将文件路径替换为你的实际文件路径，并且可能需要处理可能的IOException异常。想了解更多java的相关内容，可以阅读本专题下面的文章。
548
2024.03.22
Java 桌面应用开发（JavaFX 实战）
本专题系统讲解 Java 在桌面应用开发领域的实战应用，重点围绕 JavaFX 框架，涵盖界面布局、控件使用、事件处理、FXML、样式美化（CSS）、多线程与UI响应优化，以及桌面应用的打包与发布。通过完整示例项目，帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。
12
2026.01.14
热门下载
更多
相关下载
更多
精品课程
更多
相关推荐 /
热门推荐 /
最新课程
最新文章
更多
