如何使用yup和formik验证表单？
yup和formik是两个常用的表单验证库，可以配合使用来验证表单输入数据的有效性。下面是关于如何使用yup和formik验证表单的完善答案：
- 首先，你需要安装yup和formik。你可以使用npm或yarn命令来进行安装：
- 首先，你需要安装yup和formik。你可以使用npm或yarn命令来进行安装：
- 在你的表单组件文件中，导入所需的库：
- 在你的表单组件文件中，导入所需的库：
- 创建一个Yup模式用于定义表单字段的验证规则。例如，我们创建一个验证用户名和密码的模式：
- 创建一个Yup模式用于定义表单字段的验证规则。例如，我们创建一个验证用户名和密码的模式：
- 这里我们使用了Yup提供的
string()方法来验证字符串类型，并通过required()和min()方法分别添加必填和最小长度验证规则。 - 在你的表单组件中，使用
Formik组件包裹你的表单元素，并传入相关属性和方法： - 在你的表单组件中，使用
Formik组件包裹你的表单元素，并传入相关属性和方法： - 在
Formik组件中，我们传入了表单的初始值initialValues、验证模式validationSchema和提交方法onSubmit。在表单元素中，我们使用Field组件来代表不同的表单字段，并使用ErrorMessage组件来显示对应字段的错误信息。 - 最后，你可以在
onSubmit方法中处理表单提交逻辑。例如，你可以通过values参数来获取表单中的值，并进行后续操作，如发送请求或跳转页面。
这样，通过使用yup和formik来验证表单，你可以方便地定义验证规则，并获得相应的错误提示。这对于开发人员来说非常重要，因为它可以确保表单输入的有效性和一致性。
关于腾讯云相关产品和产品介绍链接地址，可以根据具体的需求和场景来选择适合的产品。腾讯云提供了多种云计算相关产品，包括云服务器、云数据库、人工智能服务等。你可以访问腾讯云的官方网站（https://cloud.tencent.com/）来了解更多产品信息和文档。
注意：本回答并未提及其他云计算品牌商，如有需要，请自行搜索相关内容。
相关·内容
我正在尝试使用React和Material处理“接受服务条款”复选框的复选框验证。
到目前为止我这么做了：
验证模式
const validationSchema = yup.object().shape({
email: yup
.string()
.email('Enter a valid email address')
.required('Email address is required'),
password: yup
.string()
.min(8, 'Password should be
浏览 8提问于2022-08-29得票数 0
回答已采纳
1回答
我有一个使用Formik的<Form />和<FieldArray />组件的动态表单。我的验证模式如下：
const countPerKgSchema = total => {
return Yup.object().shape({
rows: Yup.array()
.of(
Yup.object().shape({
count: Yup.string().required('Count is required'),
kg: Yup.string().require
浏览 14提问于2020-03-06得票数 2
在使用formik和Yup验证表单之后，如何将四个输入表单数据存储到本地存储中。
浏览 6提问于2022-09-30得票数 -2
3回答
我和Yup有一个经典的Formik表单，就像这样：
// Schema for the form
const OrderFormSchema = Yup.object().shape({
lastname: Yup.string()
.required('Ce champs est obligatoire.'),
firstname: Yup.string()
.required("Ce champs est obligatoire"),
company: Yup.string()
.required('Ce cham
浏览 21提问于2022-07-15得票数 2
回答已采纳
7回答
Yup中的条件验证
、、、
我有一个电子邮件字段，只有在选中复选框时才会显示(布尔值为true)。当表单提交时，如果复选框被选中(布尔值为true)，我只需要这个字段。
这就是我到目前为止所尝试的：
const validationSchema = yup.object().shape({
email: yup
.string()
.email()
.label('Email')
.when('showEmail', {
is: t
浏览 0提问于2018-03-21得票数 79
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：
import { useFormik } from "formik";
import * as Yup from "yup";
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
email: ""
},
validationSchema: Yup.obje
浏览 6提问于2019-12-22得票数 51
回答已采纳
我目前正在使用Formik库在React JS中制作一个表单。我遇到了一个验证问题，我需要用空字符串更改无效的字母。 str.replace(/\D/, '); 但是我不能访问Formik值中的input。我需要在每次按键时验证值，但Formik文档中没有关于它的信息。 组件Form import React, {useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import { Formik, Form, useFormikContext } from &#
浏览 15提问于2021-08-31得票数 0
我有一个用React和Formik写的表单。表单当前有3个字段(为了便于参数，让我们假设有3个字符串，它们使用Yup验证为必填字段)。 如果其中一个字段包含一个特定值，我想删除另一个字段，以及相关的验证。例如，如果字段x包含值'somestring'，我希望字段y出现并且是必需的，但是如果字段x包含的值不是'somestring'，我希望字段y不出现，因此不是必需的。 我是React和Formik验证的新手，所以不确定如何计算字段的当前值并基于此更改呈现。 我正在尝试使用React函数组件而不是类组件来实现这一点。 // react imports
impor
浏览 31提问于2020-12-03得票数 1
回答已采纳
我正在做一个项目，在管理面板上，医生可以为他们的治疗设定佣金。但它可能只有两位数长。但佣金不可能是0。它可以是任何0.01或0.001。我使用formik和yup创建了一个表单。但是不知道如何为这项工作设置输入字段。我试过了，但没有找到任何解决办法。
Yup验证
commission: Yup.string()
.required()
.matches(/^[0-9]+$/, "Commission should contain only digits")
// .min(1, 'Must be exactly 1 digits&
浏览 5提问于2021-08-05得票数 2
回答已采纳
我正在尝试使用formik &实现表单验证。我有一个登录/注册表单与三个字段(姓名，电子邮件，密码)。单击“创建帐户”按钮时，将有条件地呈现“名称”字段。我希望只有在表单处于寄存器状态时才需要name字段。我使用状态变量isLogin保存表单的当前状态，还使用它在formik的initialValues中初始化showName布尔值。现在，name字段没有对其应用验证，如果name字段为空，则可以提交表单。
我的密码
const [isLogin, setIsLogin] = useState(true);
const initialAuthFormValues = {
hide
浏览 13提问于2022-06-20得票数 0
我正在学习如何使用Formik和Yup来验证输入(文本)表单字段。我遵循了贾里德·帕默的标准方法，它的效果非常好。
当涉及到做一些更多的组件驱动，我有一个困难的时间达到相同水平的价值，我只是不知道我是哪里错了？
Yup似乎无法识别我的表单模型，也不会根据需要验证输入字段.
我在想，我实际上搞砸了初始值，或者我没有给出Yup想要的正确形状，但是这里的任何帮助都会令人吃惊，这是疯狂的.
我有一个示例沙箱在这里运行>>
(components/CheckoutPage/FormModel/checkoutFormModel.js)：表单模型
export default {
for
浏览 1提问于2020-06-24得票数 2
回答已采纳
我使用Formik和yup验证，遵循以下模式：
const handleSubmit = async (values, { setStatus }) => {
setStatus(''); // clean errors messages
try {
... do submit work ...
const res = await sendData( convertValues(values)); //
... more work
} catch (e) {
console.error(e);
setStatus(&
浏览 7提问于2020-11-25得票数 7
2回答
导入Yup验证时表单提交不起作用
、、、、
我从外部文件导入的验证正在运行。但是，表单提交功能不起作用。 我将验证设置如下并导出。 import * as Yup from 'yup';
const validationSchema = Yup.object().shape({
mail: Yup.string()
.email('Lütfen geçerli bir e-posta adresi giriniz!')
.required('Boş bırakılamaz.'),
password: Yup.string
浏览 15提问于2020-09-12得票数 1
我是新的反应，我试图让特定的图标显示在输入字段的末尾，这取决于Formik / Yup验证。因此，如果我的验证失败了，我希望在字段的末尾显示一个红十字会图标，如果验证成功，则需要一个滴答图标。只有验证一次，图标才会显示出来。
这是我当前的登录表单组件：
import React from "react";
import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
const LoginForm = () => (
<Formik
浏览 1提问于2021-02-12得票数 1
回答已采纳
4回答
我有一个使用reactjs + formik + yup的表单。我有一个多文件上传域。我想用yup验证文件格式和最大大小。我该怎么做呢？
浏览 70提问于2019-01-03得票数 9
我使用不同的方法创建了几个不同版本的Formik表单，试图使错误处理正常工作(具体地说，如果某些字段中的输入不是字符串，则拒绝这些输入)。很难理解为什么一个非字符串没有被选中并抛出一个错误... 这是我的第一次尝试，它使用Material UI TextField + useFormik import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField fr
浏览 25提问于2021-08-25得票数 1
回答已采纳
我使用Material-ui与Formik和Yup进行表单验证，但在单击cancel按钮时，禁用表单验证时遇到了困难。尝试使用formik resetForm，但它不起作用！你能帮帮我吗?
通过单击cancel按钮，它不工作了！
谢谢你的帮助!
码
import { Box, Button, Grid } from "@mui/material";
import { Field, Form, Formik } from "formik";
import * as Yup from "yup";
import { makeStyles
浏览 6提问于2022-02-22得票数 1
回答已采纳
6回答
我正在使用Yup和Formik进行一个react表单验证。表单中有一个需要验证的react-select元素。对于验证，我使用validationSchema of Formik来验证表单的值变化。我只需要作为字符串的select字段的值，所以不能接受完整的对象(键值)。select字段工作正常，无论验证错误消息是否被清除。问题是如何使用现有方法验证select字段？
下面是最小的代码示例。
import ReactDOM from "react-dom";
import React, { useState } from "react";
import { Gr
浏览 0提问于2019-08-21得票数 17
回答已采纳
我是一个初学者，试图用Yup验证在reactjs中创建一个表单。我正在尝试一个非常简单的表单，它有firstName，lastName。在验证lastName字段时，我尝试只显示firstName字段。
使用useFormik钩子
const formik = useFormik({
initialValues: {
firstName: "",
lastName: "",
// email: ""
},
validatio
浏览 9提问于2022-04-13得票数 1
我正在处理一个react-native表单，formik和我的验证有问题，我希望验证被发送到Alert.alert(errorMessage)，而不是像这个<Text>{errorMessage}</Text>这样的文本机器人。这是我的实际表单：
import { View, Text, StyleSheet } from "react-native";
import { Formik } from "formik";
import yup from "yup";
import SubmitButton from "
浏览 4提问于2019-03-26得票数 1
回答已采纳
我正在尝试使用Formik和Yup实现登录功能。这是我当前的架构
let loginSchema = yup.object().shape({loginId:
yup
.string()
.email("That doesn't look like a valid email")
.required("This field is required."),password: yup.string().required("This field is required."),});
但我的loginId既可以是电话号码，也可以是电子
浏览 0提问于2020-05-15得票数 2
我有一个多步骤表单，其中我使用了Formik和Yup库。 但是我正在使用的yup库的验证根本不起作用。在React调试器工具中，我将它的值设置为空。因此，无论我在输入字段中写什么，它都会用"Required“消息进行验证，因为它的值为空。 import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
let accountInfoSchema = Yup.object().shape({
name: Yup.string()
.m
浏览 19提问于2019-05-17得票数 1
回答已采纳
1回答
我正在尝试为使用Formik构建的React本机组件编写一些测试。这是一个询问用户名和密码的简单表单，我想使用一个使用Yup构建的验证模式。
当我使用模拟器并手动测试表单时，表单按照预期的方式运行，只有当输入值无效时才会显示错误消息。
然而，当我尝试用@testing-library/react-native编写一些自动化测试时，这种行为并不是我所期望的。即使提供的值是有效的，错误消息也会在测试中显示。以下是守则：
// App.test.js
import React from 'react';
import { render, act, fireEvent } from &
浏览 1提问于2021-01-16得票数 2
回答已采纳
我想在表单挂载时显示字段错误。在屈服之后不会。
是的：
const validation = Yup.object().shape({
field: Yup.string().required('Required')
});
福米克：
<Formik
initialValues={initialValues}
validationSchema={validation}
validateOnMount
>
...
</Formik>
谢谢你帮忙！
浏览 12提问于2020-05-19得票数 9
回答已采纳
2回答
我是使用Formik的反应形式与材料用户界面。我有两个字段，我需要计算这两个字段的值变化，所以我必须得到这两个字段的值，
const formik = useFormik({
initialValues: {
quantity: '',
price: '',
total: '',
},
validationSchema: Yup.object({
quantity: Yup.string().ma
浏览 10提问于2022-01-06得票数 0
回答已采纳
我使用formik作为表单实现。当您在上面的行中添加数据时，我们需要追加一个新的字段行。在提交表单时，我们将得到yup验证错误，因为新添加的行不符合条件。请建议跳过新添加的行(最后一行)的验证的解决方案。
This is the validation schema
Yup.object().shape({
key1: Yup.object({
key2: Yup.object({
key3: Yup
.array()
.of(Yup.object().shape
浏览 1提问于2019-09-10得票数 3
回答已采纳
这看起来可能很长，但这只是因为我想确保提供我所拥有的所有信息。因此，我在react组件中有一个Formik表单，它处理几个文本输入和几个文件上传。我在React类组件中使用了这个Formik组件： <Formik
initialValues={{
...initialValues, //no need to list them all here
affiliateLogo: null,
}}
validationSchema={validationSchema}
onSubmit(values=>{//do something with the v
浏览 47提问于2020-11-10得票数 1
回答已采纳
1回答
如何使用Form.Check和Formik正确地将yup绑定到布尔变量
React Bootstra4.5提供了一个使用 + Formik + yup的表单输入。我能够设置文本输入和选择，但是遇到了Form.Check元素的问题。我希望它在更改时提供简单的布尔值，但是当选中复选框时，我将得到一个空数组[]或["on"]。
文档也存在此问题，在上面表单中的链接示例中，显示了以下错误消息：
terms must be a boolean type, but the final value was: ["on"].
我的代码：
const schema =
浏览 1提问于2021-02-14得票数 1
回答已采纳
1回答
我正在使用Formik与Yup在一个项目，我正在工作。
我正在创建一个多步表单。当用户单击next按钮时，如果步骤1的输入是有效的，我想显示第二步的输入。否则，他应该留在第一步。
是否有一个函数来检查输入是否有效？
<Formik
initialValues={{
name: '',
kitchenName: '',
phone: '',
email: '',
address: {
street: '',
city: '',
postalCode:
浏览 3提问于2021-03-18得票数 0
回答已采纳
2回答
我有三个字段: Formik表单中的referenceMonth(string)、openingDate(string)、closingDate(string)。当openingDate与openingDat不是同一个月时，我会向referenceMonth添加一个错误。
export const VALIDATION_SCHEMA = Yup.object().shape({
'referenceMonth' : Yup.number().required(YUP_DEFAULT_ERROR_VALUE),
'openingDate' : Yu
浏览 5提问于2021-04-02得票数 3
2回答
在一个有许多输入(比如40个字段)的formik表单中，我可以看到表单是缓慢的。
这是我的formik配置：
const formik = useFormik({
enableReinitialize: true,
initialValues: contractor,
validateOnBlur: true,
validateOnChange: false,
validateOnMount: true,
validationSchema: // YUP validation here
浏览 8提问于2022-01-24得票数 1
回答已采纳
1回答
在下面的StackBlitz中，我有一个非常简单的表单验证。验证是在用户单击submit按钮时完成的。
import { ErrorMessage, Field, Form, Formik } from 'formik';
import React from 'react';
import * as Yup from 'yup';
export default () => {
return (
<Formik
initialValues={{
email: '',
浏览 11提问于2022-03-20得票数 1
1回答
你好，我正在尝试使用Formik + Yup来验证我的表单。我一直在验证日期的数字，但是在我添加数字字段后，触摸任何字段都会使应用程序崩溃。如何正确地用Yup验证一个数字的最小和最大？
见我的代码框：
如果您注释掉一整天的日期字段，应用程序将正常运行。
浏览 0提问于2019-05-08得票数 0
回答已采纳
我正在尝试使用Formik和Yup验证一个材料ui表单，但我得到了一个错误。 这是我从另一个文件导入的模式。 export const schema = Yup.object({
email: Yup.string()
.email('Invalid Email')
.required('This Field is Required'),
}); 这就是我使用验证的地方。如果我编写validation = schema，它不会给出错误，但也没有验证。如果我把它改成{schema}，应用程序就会崩溃。 export default funct
浏览 29提问于2020-04-07得票数 1
回答已采纳
我正在使用Formik，并想知道如何在离开屏幕时清除错误和表单值。
例如，用户尝试提交没有值的表单，并显示错误：
当用户导航到不同的屏幕，然后返回时，这些错误仍然存在。有办法清除这些东西吗？例如，我可以访问useEffect钩子中的Formik方法吗？
到目前为止，这就是我的实现：
export const SignIn = ({route, navigation}) => {
const formValidationSchema = Yup.object().shape({
signInEmail: Yup.string()
.required(&#
浏览 14提问于2022-03-28得票数 1
2回答
我使用的是Formik React表单和在模式上定义的Yup验证：
export const Contact = yup.object<IContact>().shape({
contactName: yup
.string()
.trim('The contact name cannot include leading and trailing spaces')
.strict(true)
.min(1, 'The contact name needs to be at least 1 char')
.m
浏览 3提问于2020-02-27得票数 14
回答已采纳
从字段中，如果您没有给出任何内容，那么您将得到验证错误，如果您单击submit按钮，您将得到验证错误--这是正确的，但是如何限制cancel按钮--如果您单击cancel按钮时没有在字段中提供任何数据，那么验证错误就不应该出现，如何仅对cancel按钮或任何类型的链接限制formik验证。我可以使用validateOnBlur，特别是cancel按钮，因为在初始阶段，如果我使用它禁用所有离焦类型的错误，但我只需要单击cancel，验证错误就不会出现。我应该遵循什么方法。
import React from "react";
import { Formik, Fo
浏览 8提问于2022-04-07得票数 1
回答已采纳
这是我遇到的第一个堆栈溢出问题。我正在尝试建立一个登录页面(做一个完整的堆栈应用程序与节点快速mongodb mongoose)和前端是反应。我遇到了一个问题，在我单击输入字段并单击输出之前，输入字段css不会注册。我正在使用Formik开发我的表单。我基本上有两个问题:如何解决这个问题，以及如何对运行在localhost:3003上的后端服务器进行API调用。代码如下：
import React from "react";
import "../App.css";
import { Formik } from "formik";
impor
浏览 0提问于2019-11-24得票数 0
1回答
我使用Formik和Yup，当我预填充域/form时，Yup会验证这些域，就像它们没有填充一样。我有基本的CRUD类型布局，其中更新数据需要预先填充表单。这些预先填充的字段不应该通过错误进行验证。我做错了什么？ 验证方案： const validationSchema = Yup.object({
fname: Yup
.string()
.required('First Name is required'),
lname: Yup
.string()
.required('Last Name is required'),
ad
浏览 28提问于2021-04-04得票数 0
1回答
我是个新手。我尝试使用formik和yup进行表单验证，但我遇到了一个问题。我的验证工作正常，但如果我输入一个字段，所有字段都显示验证如何限制它。如果我输入名称字段，并给出一些输入，它将显示所有下面的字段还显示“验证错误”。我想像onBlur一样使用它，我们如何在formik中使用它？
import React from "react";
import "./App.css";
import { useFormik } from "formik";
import * as yup from "yup";
const App =
浏览 11提问于2020-03-05得票数 0
回答已采纳
1回答
我正在构建一个系统，在这里我们可以创建一个项目，并通过使用Formik、Yup和React Select填充一个表单，将其分配给几个用户。
然而，当我使用Formik提交表单时，我真的很难传递用户数组，Formik没有接收来自React Select的数据。
下面是代码的片段：
const validationSchema = () => {
return Yup.object().shape({
title: Yup.string().required('A title is required'),
description: Yup.string().requi
浏览 1提问于2022-06-03得票数 1
回答已采纳
3回答
我有一个使用Formik库创建事件的表单。我需要检查开始日期是否与结束日期重叠，反之亦然。我有两个日期选择器来选择日期和时间。我如何使用Yup来验证这一点，并在它们重叠时显示错误消息？
提前感谢你的帮助
const validationSchema = Yup.object().shape({
eventName: Yup.string()
.min(1, "Must have a character")
.max(10, "Must be shorter than 255")
.required("
浏览 6提问于2019-11-12得票数 18
回答已采纳
在我们的React应用程序中，一个页面中有多个表单。我们将Formik和Yup分别用于表单和验证。
目前，只有当字段/表单被触摸时才会触发验证。我们在Formik上构建了一个包装器，在模糊/焦点事件上提交表单。
现在，要求是在一个页面中显示包含多个Formik表单的页面中所有所需字段的错误。
为了进一步澄清，我的包装器看起来像
const { onSubmit, className, style, ...restProps } = this.props;
return (
<div
ref={this.setContainerRef
浏览 2提问于2021-04-20得票数 1
我想将material-ui添加到我的formik应用程序中。我使用formik-material-ui库(https://github.com/stackworx/formik-material-ui)来做这件事。但是，当我将material-ui textfield组件插入到字段中时，在提交之前会触发验证。我的直觉是这是一个mapStateToProps问题，但我不确定如何将它集成到我的代码中，因为关于它的文档并不多。 任何帮助都非常感谢，谢谢！ import React from 'react';
import * as Yup from 'yup';
浏览 23提问于2019-05-03得票数 0
回答已采纳
我有一个react原生的Formik表单和一个Yup validationSchema。当用户提交表单时，我想创建一个警告与错误字段，如果有字段是无效的。 Dependencies:
"formik": "^1.4.1",
"react": "16.5.0",
"react-native": "0.57.1", 我曾尝试在Formik呈现中使用isValid，并创建了一个Alert with errors，但得到了一个空的errors对象。但是，如果我再次提交/或单击submit两次，error对
浏览 17提问于2019-01-11得票数 5
回答已采纳
1回答
这是我完整的编辑表格。我在用道具检查类型。还使用yup对formik进行验证。但是，我的输入字段不接受十进制数。是否需要为十进制数字添加自定义验证规则？当前表单的验证和错误反馈对没有十进制格式的数字正常工作。有什么提示吗?我该怎么解决？提前谢谢！
import React from "react";
import PropTypes from "prop-types";
import { Formik, Form, Field } from "formik";
import { Button, Input, FormGroup, Label, F
浏览 6提问于2022-08-01得票数 0
我正在尝试创建一个具有创建帖子功能的网站，并且我选择使用formik来创建用于提交帖子的表单。但是，当我尝试提交表单并将其发送到后端时，validationschema会执行步骤，并告诉我输入错误，请参见附件中的图片。我曾尝试在"createPosts“函数中使用console.log()进行检查，但其中的代码从未运行过。 下面是我的前端“创建帖子”页面的代码。 import React from 'react'
import Axios from 'axios';
import {BrowserRouter as Router, Route, Swi
浏览 21提问于2021-09-06得票数 0
回答已采纳
我有一个表单与Formik，我将减少重新呈现，所以我使用了FastField。我得到了错误Cannot read properties of undefined (reading 'getFieldProps')，我不知道如何解决它。
有完整的代码
我发现了和
import React from "react";
import ReactDOM from "react-dom";
import { useFormik, FastField } from "formik";
import * as yup from "yup
浏览 21提问于2022-03-09得票数 0
1回答
我是新的反应，特别是形式。我试图学习如何创建一个登录表单使用formik，将显示一个标签，称为电子邮件输入电子邮件。带有密码输入的名为password的标签和名为submit的按钮。
我的问题是，只有两个输入和提交按钮显示在浏览器中。电子邮件和密码的两个标签在浏览器中不显示。请告诉我怎么解决这个问题。
App.js：
import React from 'react';
import './App.css';
import FormikContainer from './components/FormikContainer';
import Lo
浏览 5提问于2022-06-29得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
