如何在ReactJs中有条件地更改Yup验证
在ReactJs中，可以使用Yup库来进行验证。Yup是一个轻量级的JavaScript验证库，用于验证表单数据和对象的有效性。
要在ReactJs中有条件地更改Yup验证，可以按照以下步骤进行操作：
- 首先，安装Yup库。可以使用npm或yarn进行安装：
- 首先，安装Yup库。可以使用npm或yarn进行安装：
- 导入Yup库并创建验证模式。根据需要定义验证模式，可以使用Yup提供的各种验证规则，例如字符串长度、必填字段、正则表达式等。以下是一个简单的示例：
- 导入Yup库并创建验证模式。根据需要定义验证模式，可以使用Yup提供的各种验证规则，例如字符串长度、必填字段、正则表达式等。以下是一个简单的示例：
- 在上面的示例中，我们创建了一个验证模式，其中"name"字段是必填的字符串，"age"字段必须是至少18岁的数字。
- 在React组件中使用验证模式。可以使用Formik库来处理表单和验证。以下是一个简单的示例：
- 在React组件中使用验证模式。可以使用Formik库来处理表单和验证。以下是一个简单的示例：
- 在上面的示例中，我们使用Formik来处理表单和验证。通过使用formik.handleChange来处理输入框的值变化，formik.handleSubmit来处理表单提交。在输入框下方，根据验证结果显示错误消息。
通过按照上述步骤，在ReactJs中有条件地更改Yup验证。根据具体需求，可以根据Yup的验证规则进行定制。这种方法可以确保在表单提交之前验证用户输入的数据的有效性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）
- 腾讯云产品：云数据库 MySQL（https://cloud.tencent.com/product/cdb_mysql）
- 腾讯云产品：云对象存储（https://cloud.tencent.com/product/cos）
- 腾讯云产品：腾讯云函数（https://cloud.tencent.com/product/scf）
- 腾讯云产品：腾讯云物联网套件（https://cloud.tencent.com/product/iot）
- 腾讯云产品：区块链服务（https://cloud.tencent.com/product/tbaas）
- 腾讯云产品：腾讯云智能视频分析（https://cloud.tencent.com/product/vca）
- 腾讯云产品：腾讯云人工智能（https://cloud.tencent.com/product/ai）
相关·内容
2回答
withoutLimitations_1" onClick={checkMe1}> </MyCheckbox> 另外，我使用Yup来创建验证： validationSchema={Yup.object({ numberOfUses: Yup.number().requi
浏览 33提问于2021-05-06得票数 0
2回答
在这个链接中，我们可以看到一个简单的Yup验证模式。因此，当我们在电子邮件字段中输入某些内容时，电子邮件验证中的控制台日志将被打印出来，这显然是很好的。验证模式 name: yup.string().required(),
email: yup.string().test('is-jimmy-是否有方法在Formik中添加多个验证模式以避免此问题？
浏览 8提问于2022-11-01得票数 0
Yup允许使用.when基于另一个值进行验证。示例： var inst = yup.object({ count: yup .when('isBig', {this.state.selectedValue === 'a'} value="a"
name="radio-button-dem
浏览 40提问于2019-02-20得票数 1
回答已采纳
1回答
在ReactJS中，我正在开发一个类组件，并使用Formik进行验证。我可以做验证，但错误信息显示为正常颜色(黑色)。如何在任何HTML元素(span、div等)中添加此错误消息。下面是要验证的代码 import React, { Component } from 'react'import { Formik, FormikProps, Form, Field, ErrorMessage }
浏览 46提问于2020-06-28得票数 1
回答已采纳
本质上，我希望使用不是表单值的状态钩子来验证带有YUP的formik表单。validationSchema={Yup.object({ .when(approvalState, {an approval.'), })}下面是submit按钮，它将状态值更改为true：
<button'submi
浏览 0提问于2020-05-04得票数 1
回答已采纳
我需要同时知道是否满足不同条件的密码，以突出显示下面的可视。validationSchema: Yup.object({ .required('Required
浏览 1提问于2022-07-13得票数 1
回答已采纳
7回答
我在reactjs中使用formik进行表单管理，我有一个关于yup验证的问题。
我有两个字段，一个是用于选择国家的选择控件，另一个是邮政编码。在country数组中，我们使用regex来验证邮政编码，其思想是使用当前选定国家/地区的regex来验证输入的邮政编码，有人可以提供如何执行此操作的线索。
浏览 4提问于2018-03-28得票数 12
6回答
是否有可能只在字段存在时验证它？
我要创建一个应用程序。字段(电子邮件)可能/不显示在步骤2上，它取决于步骤1的选定选项。问题是我不能放置email: Yup.string().Required()，它导致验证一直运行，甚至字段也不显示。
浏览 14提问于2021-01-07得票数 7
回答已采纳
2回答
基于复选框的输入验证
、、、
我有一个输入和一个复选框。你可以写在输入和提交，这将提交正确的数据。您可以通过单击复选框禁用输入，它将提交空值，这正是我想要的。但是，当您使用复选框填充输入并禁用输入并提交时，它将提交当前值，但由于禁用了它，所以我希望它提交null。我用的是反应钩子的形式。我尝试使用setValue form表单(在沙箱中显示)--当您选中复选框时，它会将值设置为null，但是当您再次选中复选框时，将删除当前值，但我希望具有前面的值。
浏览 3提问于2022-08-01得票数 0
回答已采纳
我创建了一个表单，并接受了一些输入，如studentName、照片等，我想验证这些输入。为此，我使用Formik & Yup。对studentName的验证工作良好，但不适用于照片。当我试图上传文件时，它总是会产生错误，因为上传的文件太大了，，即使我上传的大于1mb。简单地说，下面的条件不起作用。photo: Yup.mixed()
.test('FILE_SIZE', 'Uploaded file is too big.&#x
浏览 5提问于2020-09-20得票数 1
我已经完成了用于虚拟验证的组合api文档，如果我遵循它们的文档中描述的模式，我肯定可以让我的验证工作在我的表单上进行。import * as yup from "yup";
import BaseModel from ".([InvoiceElement.validationSchema.getDefault()]
浏览 6提问于2021-08-31得票数 1
我正试图从部署在net::ERR_NAME_NOT_RESOLVED.实例上的API网关私有程序中调用一个API网关私有，我得到了：POST OK -私有API网关与VPCE (VPCE“效果”：“拒绝”，“主体”：""，“操作”：“执行-api:调用”，“资源”："arn:aws:execute-api:us-west-2:123456789123:abcde1abc2///"，“条件
浏览 1提问于2021-02-08得票数 1
回答已采纳
1回答
我正在尝试根据文件夹中的svg文件不存在的条件来有条件地呈现数据url。我有一大堆正在传入的svg文件，它们是由文件名动态引入的。有一些svg是不存在的，因此我需要动态地呈现一个圆形图标，其中包含一个大写文本作为图像的占位符。我目前有： 我知道有一种方法，但我一直没有能力解决这个问题，也没有任何类似的在线解决方案。
浏览 20提问于2021-02-08得票数 0
回答已采纳
在我的react项目中，我有一个要求，我必须不断地检查条件，并在条件为真时立即调用函数。条件看起来像这样：if(document.getElementById('myInputField').getAttribute('aria-invalid(document.getElementById('myInputField') === El) {
// function ca
浏览 2提问于2020-10-20得票数 0
1回答
如何在某些组件上隐藏侧边导航？
、、、、
因为我是ReactJS上的新手。我尝试了许多解决方案来在不同的组件上实现显示/隐藏侧边菜单。a.当用户登录时，所有组件上都会显示侧边菜单。b.当用户注销时，它只显示一些组件，如忘记密码或条款和条件(菜单名称根据身份验证更改)，但在登录组件上隐藏。
浏览 2提问于2020-10-15得票数 0
TLDR；
我有一个表单，它要求我在Formik中有条件地呈现特定字段，但如果该字段不存在，也要从它中删除验证。这些子表单中的字段可以打
浏览 3提问于2022-09-07得票数 1
我想在我的表单中有条件地显示错误。目前，formik只在提交时涉及到字段。我怎么才能触摸到它呢onChange？collection.map(item => ({ label: item.name}
const validationSchema =
浏览 0提问于2018-09-10得票数 7
回答已采纳
我需要动态地开发添加或删除控件(行)。
import React from &q
浏览 6提问于2021-12-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
