Formik React-Native -如何在对象数组中的每个字段上显示Yup验证错误

Formik是一个用于构建React表单的开源库，而React-Native是React框架的移动端版本。在使用Formik React-Native时，可以通过Yup库来进行表单验证。Yup是一个轻量级的JavaScript对象模式验证库，可以用于验证表单字段的值。

要在对象数组中的每个字段上显示Yup验证错误，可以按照以下步骤进行操作：

首先，确保已经安装了Formik和Yup库。可以使用npm或yarn进行安装：
首先，确保已经安装了Formik和Yup库。可以使用npm或yarn进行安装：
或
或
导入所需的库和组件：
导入所需的库和组件：
创建Yup验证模式。可以使用Yup的各种验证方法来定义字段的验证规则。例如，对于一个名为"email"的字段，可以使用Yup的string()方法来定义它的类型，并使用email()方法来验证邮箱格式：
创建Yup验证模式。可以使用Yup的各种验证方法来定义字段的验证规则。例如，对于一个名为"email"的字段，可以使用Yup的string()方法来定义它的类型，并使用email()方法来验证邮箱格式：
创建包含表单的组件，并使用Formik组件包装它。在Formik组件中，可以通过initialValues属性设置表单字段的初始值，并通过onSubmit属性定义表单提交时的操作：
创建包含表单的组件，并使用Formik组件包装它。在Formik组件中，可以通过initialValues属性设置表单字段的初始值，并通过onSubmit属性定义表单提交时的操作：
在上述代码中，handleChange和handleBlur函数用于处理输入框的值变化和失去焦点事件，values对象包含了表单字段的当前值，errors对象包含了验证错误信息。
在应用中使用该表单组件：
在应用中使用该表单组件：

通过以上步骤，就可以在对象数组中的每个字段上显示Yup验证错误。当表单提交时，Formik会自动执行验证，并根据验证结果在对应的字段下方显示错误信息。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云原生应用引擎：https://cloud.tencent.com/product/nae
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云服务器：https://cloud.tencent.com/product/cvm
腾讯云音视频处理：https://cloud.tencent.com/product/mps
腾讯云人工智能：https://cloud.tencent.com/product/ai
腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
腾讯云存储服务：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
腾讯云元宇宙：https://cloud.tencent.com/product/mu

响应本机Formik / Yup验证不会引发错误

javascript、reactjs、react-native

我已经尝试了3天的时间来进行数组验证，使用Formik和。验证是有效的，但我无法理解如何显示错误。我在api中有很多任务，如果开关是假的，用户需要写一个注释，为了测试目的，我禁用了这个开关，以了解如何让数组验证运行。';im

浏览 3提问于2022-09-05得票数 3

1回答

无法绑定对象数组的Formik验证错误

reactjs、typescript、formik、yup

我有一个包含两个字段的表单:布尔值和对象数组。当布尔值为真时，则需要数组。数组有两个字符串字段，一个是必需的，另一个不是。验证Schecma boolVal: Yup.boolean().required().nullableboolVal:false, a

浏览 12提问于2022-04-20得票数 0

1回答

如何使用Yup的验证时间()方法动态显示/隐藏Formik表单中的输入字段？

reactjs、forms、formik、yup、formik-material-ui

我是一个初学者，试图用Yup验证在reactjs中创建一个表单。我正在尝试一个非常简单的表单，它有firstName，lastName。在验证lastName字段时，我尝试只显示firstName字段。验证和提交功能c firstName : Yup.string().max(1

浏览 9提问于2022-04-13得票数 1

1回答

使用Yup对多个字段进行条件验证

formik、yup

我有3个输入字段(名称、id和邮政编码)，我使用formik和Yup进行验证。我想在这里实现的是，我想要匹配每个输入字段的已知组合的名称，id和邮政编码(我有一个预定义的默认值id，name，postcode)。如果在所有3个输入字段上输入的值与名称、id和邮政编码的默认值完全匹配，那么我必须在每个字段

浏览 3提问于2021-08-19得票数 1

1回答

如何检查值已经存在于对象验证数组中

formik、yup

嗨，我又和Yup在一起了[{startdate:'',endDate:'',name:''},{startdate:'',endDate:'',name:''}] 开始/结束日期是使用Yup和formik之前的日期对象</

浏览 6提问于2020-04-12得票数 1

回答已采纳

2回答

如何在react native中显示在提交Formik表单后发现错误的警报

reactjs、react-native、formik、yup

我有一个react原生的Formik表单和一个Yup validationSchema。当用户提交表单时，我想创建一个警告与错误字段，如果有字段是无效的。Dependencies:"react": "16.5.0", "react-native": "0.57.1", 我曾尝

浏览 17提问于2019-01-11得票数 5

回答已采纳

2回答

Formik & Yup:如何验证所提供的日期是否为18岁？

javascript、reactjs、formik、yup、date-fns

我正在编写一个由Formik、Yup和ReactJS组成的表单。在date字段中，我试图验证用户是否已经18岁。我在Formik通过了以下validationSchema表：....dob: Yup.date() .nullabl

浏览 4提问于2020-10-19得票数 1

回答已采纳

1回答

formik + yup并验证子react组件中的字段

reactjs、validation、formik、yup

, initialValues={this.buildInitialValues()} <AddressFormFields prefix="shipAddressAttributes" /></Formik> 其中<AddressForm/>

浏览 1提问于2019-06-08得票数 5

1回答

Formik & Yup -如何为数组和字符串创建模式

reactjs、validation、formik、yup

我正在使用Formik创建一个图书图书馆的表单，其中列表中的每个项目将如下所示： name: 'string',}schema = Yup.object().shape({

浏览 12提问于2019-10-30得票数 2

回答已采纳

2回答

从yup模式访问min和max常量

reactjs、react-native、formik、yup

我试图使用Formik + Yup编写一个用于模式验证的react本机应用程序，并且在提取max验证中通过的常量时遇到了一些困难。让我们想象一下以下模式： .max(30)在中，假设是自定义的TextInput，我希望获得常量30，以便将其传递给maxLength支柱： <TextInput maxLength

浏览 0提问于2019-09-04得票数 1

1回答

Formik -如何使用Yup验证访问数组中的错误消息？

reactjs、formik、yup

我正在使用Formik和Yup构建一个带有验证的表单，发送有关缺少字段的特定错误消息。其中一个字段(问题)是和对象数组，而我找不到一种方法来访问每个单独的错误消息。我已经创建了一个validationSchema，但是当我试图在Formik error prop上传递数组索引时，我得到了一个错误</em

浏览 35提问于2019-06-11得票数 0

1回答

使用Formik和Yup作为验证模式时，本机测试失败

reactjs、react-native、formik、yup、react-native-testing-library

我正在尝试为使用Formik构建的React本机组件编写一些测试。这是一个询问用户名和密码的简单表单，我想使用一个使用Yup构建的验证模式。当我使用模拟器并手动测试表单时，表单按照预期的方式运行，只有当输入值无效时才会显示错误消息。然而，当我尝试用@testing-library/react-native编写一些自动化测试时，这种行为并不是我所期望的。即使提供的值是有效<

浏览 1提问于2021-01-16得票数 2

回答已采纳

4回答

用YUP验证文件的存在

reactjs、formik、yup

我使用来验证我的表单。在我的表单中，我想验证一个<input type="file" />是否有一个文件。我已经测试过这个(而且它不起作用)： file: Yup.object().shape({}).required('File required') 控制台

浏览 1提问于2018-09-20得票数 31

3回答

是否有一种方法可以跳过对对象数组中最后一个对象的yup验证？

reactjs、formik、yup

我使用formik作为表单实现。当您在上面的行中添加数据时，我们需要追加一个新的字段行。在提交表单时，我们将得到yup验证错误，因为新添加的行不符合条件。请建议跳过新添加的行(最后一行)的验证的解决方案。: Yup.object({ .array()

浏览 1提问于2019-09-10得票数 3

回答已采纳

1回答

Formik + Yup，数组被转换为对象，然后验证失败

javascript、reactjs、formik、yup

我有一个带有以下Yup模式的过滤器数组： const schema = Yup.object().shape({ Yup.array，并显示以下错误(即formik.errors的值)： { "filters[0] must be a `array` type, but

浏览 18提问于2020-07-08得票数 0

回答已采纳

1回答

当Formik出现错误时，如何显示通用消息

reactjs、forms、validation、error-handling、formik

我有一个表单，使用Formik作为我的表单，使用Yup进行验证。在每个Field下，我都有一个<ErrorMessage />组件来显示该表单域的相关消息。这可以很好地工作，但是，因为有很多字段，所以当用户提交表单时，我希望在submit按钮旁边显示一条通用消息。</div> 我尝试基于Formik中的

浏览 10提问于2021-02-27得票数 0

2回答

单击react中的cancel按钮时如何限制formik验证

javascript、reactjs、formik、yup

从字段中，如果您没有给出任何内容，那么您将得到验证错误，如果您单击submit按钮，您将得到验证错误--这是正确的，但是如何限制cancel按钮--如果您单击cancel按钮时没有在字段中提供任何数据，那么验证错误就不应该出现，如何仅对cancel按钮或任何类型的链接限制formik验证。我可以使用valida

浏览 8提问于2022-04-07得票数 1

回答已采纳

2回答