是的,嵌套模式验证

2024-01-11

我正在尝试根据用户选择的选择选项有条件地验证对象,问题是我正在渲染货币列表,并且在尝试将其设为必填字段时遇到巨大困难,因为我必须传入一个空的对象开始。

我的代码堆栈是 React、Formik 和 Yup(所有最新版本)。

对象模式

category: 'A',
details: {
   name: '',
   price: 0,
   stock: 0,
   currency: {
      label: '',
      code: '',
      symbol: '',
      alpha_2: '',
    }
}

是的模式

category: Yup.string().required('You must pick a category'),
details: Yup.object().when('category', {
  is: 'A',
  then: Yup.object({
       label: Yup.string().required(`Select the currency you're retailing in`),
        code: Yup.string().required(`Select the currency you're retailing in`),
        symbol: Yup.string().required(`Select the currency you're retailing in`),
        alpha_2: Yup.string().required(`Select the currency you're retailing in`),
    }),
})

使用上面的代码,表单通过了验证,并且货币对象有一个空值列表'',这是一个不希望的结果。

如何进行模式触发器验证?


您没有验证details.currency where label/code/symbol/alpha_2被存储。 在里面schema.details, then应该由一个Yup.object其中还有另一个Yup.object存储在currency属性,然后定义您想要的验证label/code/symbol/alpha_2.

Example:

const yup = require("yup");

const schema = yup.object({
    category: yup.string().required('You must pick a category'),
    details: yup.object().when('category', {
        is: 'A',
        then: yup.object({
            currency: yup.object({
                label: yup.string().required(`[1] Select the currency you're retailing in`),
                code: yup.string().required(`[2] Select the currency you're retailing in`),
                symbol: yup.string().required(`[3] Select the currency you're retailing in`),
                alpha_2: yup.string().required(`[4] Select the currency you're retailing in`),
            })
        }),
    })
})

let state = {
    category: 'A',
    details: {
        name: '',
        price: 0,
        stock: 0,
        currency: {
            label: 'a',
            code: 'b',
            symbol: 'c',
            alpha_2: 'd',
        }
    }
}

schema.validate(state).then(console.log).catch(err => console.log(err))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是的,嵌套模式验证 的相关文章

  • ReferenceError:regeneratorRuntime未定义(但在范围内工作)

    我遇到过这种奇怪的情况 ReferenceError regeneratorRuntime is not defined 我已经设法在一个非常小的设置中重现 与同一问题上的类似问题相比 并且还注意到一些奇怪的行为 具体取决于是否使用范围 以
  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • Chart.js 在初始化时设置活动段

    我正在使用 Chart js v2 并且尝试在加载图表时模拟圆环图上某个段的 悬停状态 因此看起来有一个部分已突出显示 我已经搜索和梳理了代码一天 但找不到一个好的方法来做到这一点 提前致谢 设置片段的悬停样式有点令人困惑 因为它没有真正记
  • Eslint errorring 导入没有扩展名的 jsx

    我正在尝试在 es6 中导入 jsx 文件而不需要 jsx 扩展名 import LoginErrorDialog from LoginErrorDialogView Not import LoginErrorDialog from Log
  • Javascript Promise“then”始终运行,即使 Promise 未能执行

    我希望当调用第二个 then 时不执行第三个 then 但是 即使 Promise 被拒绝 调用第二个 then 并且代码返回 rejected 然后返回 undefined 它仍然调用第三个 then 如何不运行第三个 then 这样 未
  • 为什么 iife 在一个简单的例子中不起作用?

    我不明白为什么函数表达式调用不起作用并抛出错误 你能给我解释一下吗 var a function x alert x function a 1 谢谢大家 任务比我想象的要容易得多 这是因为 JS 将 IIFE 解析为函数的参数调用 这样做时
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 引导程序提前输入未填充承诺的响应

    我的引导程序预输入如下
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 调整图像大小并将画布旋转 90 度

    这里有很多关于在 js 上使用画布旋转图像的主题 我阅读了其中的大部分内容 但无法找到解决我的问题的方法 我正在接收任何分辨率的图像 来自上传组件 我将其大小调整为 1024x768 如下所示 var canvas document cre
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 为什么我们在打字稿中使用 HTMLInputElement ?

    我们为什么使用 document getElementById ipv as HTMLInputElement value 代替 document getElementById ipv value 功能getElementById返回具有类
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • 访问Mac的传感器数据

    有没有办法使用 Python 和 或 C 在 Mac 上获取环境光传感器数据 谷歌了一下 没有找到太多信息 大部分信息都与 Objective C 有关 这看起来并不简单 您可能需要使用 C C 来制作 swig 组件 这是一个读取突然运动
  • 在 mac 上将 VS code 与 TFS 连接

    如何连接视觉工作室代码 on mac with 团队基础服务器 TFS 或者有其他方式连接tfs吗 以下是将 TFS TFVC 存储库有效连接到 Mac 上的 VS Code 的步骤 安装软件 安装 Visual Studio Code f
  • 检查对象是否有用户定义的原型?

    简而言之 我可以检查一个对象是否具有用户定义的原型吗 Example var A function var B function B prototype Pseudocode A hasUserPrototype False B hasUs
  • 如何使用 setText() 在自定义布局对话框中编辑文本

    我有一个自定义对话框布局中的 TextView 当对话框即将出现时 必须更改其文本
  • 无法反序列化当前 JSON 对象,为什么?

    我正在尝试使用 WebApi 从我的数据库中获取员工列表 使用以下代码 这是我的客户端 MVC 应用程序的代码 string u http localhost 1411 api EmployeeAPI Uri uri new Uri u H
  • Javascript 范围 addEventListener 和 this

    我是一名 C 开发人员 正在尝试 JavaScript 我正在尝试了解范围 我有以下代码 其中包含addEventListener我想在其中使用我的对象中的字段 function window function Keyboard this
  • 为 exec ANT 任务启用控制台输出

    在 Eclipse 中 我使用以下 Macrodef 启动一个 html 页面 其中嵌入了 ANT 中的 swf
  • 对两个黑白图像进行异或并求和

    从两张图像开始im1 and im2使用PIL模块创建 我们有相应的黑白图像 bw im1 im1 convert 1 and bw im2 im2 convert 1 每个像素的bw im2 and bw im2是 0 或 256 假设两
  • Google Analytics 实时如何工作?

    我想知道 Google Analytics 实时用户界面是如何工作的 技术是什么 他们是否使用客户端的长轮询 通过将实时信息从服务器传送到客户端来保持 UI 统计数据即时更新 我刚刚在网络选项卡上打开 Chrome 开发工具 并且有一个无限
  • IIS 7.0 上的 ETag

    IIS 中的 Etag 是否默认启用 如果没有 请告诉我如何打开它们 Etag 开启 默认设置为 0 http attosol com etag and iis demystified http attosol com etag and i
  • Python 更新 Github 远程存储库上的文件,无需本地工作目录

    这是关于在没有本地工作目录的情况下推送到远程存储库的问题的后续问题 Python 将文件推送到 Github 远程仓库 无需本地工作目录 https stackoverflow com questions 39737192 python p
  • Python - 将 CSV 转换为对象 - 代码设计

    我有一个小脚本 用于读取包含员工的 CSV 文件 并对这些数据执行一些基本操作 我们读入数据 import gd dump 并创建一个Employees对象 包含一个列表Employee对象 也许我应该想一个更好的命名约定 哈哈 然后我们调
  • 作为图形 IDE 用户,我应该对传统编辑器感兴趣吗? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何确定节点中用户的IP地址

    如何确定控制器内给定请求的 IP 地址 例如 快递 app post get ip address function req res need access to IP address here In your request https
  • 使用来自 C99 的库在 Windows 上使用 TCC 编译文件

    所以最新版本的TCC据说实现了C99的一些功能 但是 我发现它不包括C99的数学库 有没有办法让它在 Windows 上使用更多 C99 的库 我用 google 搜索了一下 发现了一些主要与 Linux 相关的建议 但对于这个项目 我需要
  • org.apache.http.conn.HttpHostConnectException:与 https://jazz.net 的连接被拒绝

    我已将我的工作灯从 5 0 5 升级到 5 0 6 当我在 5 0 5 上工作时 它工作正常 但当我在更新版本的工作灯 5 0 6 中使用相同的代码时 它给了我这个错误 响应 apps services api RTMLight commo
  • 从 XCode 中的 .strings 文件读取字符串

    我是 iOS 新手 我有一个 strings 文件 其中存储了一个免责声明 当我的应用程序打开时可以查看该免责声明 但是 我无法弄清楚如何从 disclaimer strings 文件中调用 免责声明 字符串 如有帮助 将不胜感激 另外 感
  • 如何通过哈希比较限制 API 密钥的使用

    我目前正在使用Spotify in my Android应用程序 但我需要使用Secret为了刷新令牌等等 我想传达我的秘密Backend到应用程序 因此秘密并不驻留在APK并且反编译时找不到 我读过很多关于保护应用程序中的秘密的内容 通过
  • RobotFramework:超出启动关键字的最大限制

    我是 RobotFramework 的新手 我正在尝试做一个简单的测试 使用 Log 关键字打印 Hello world 并从 java 类获取值 我在 Ride 上使用 jybot Settings Library robot MyTes
  • 是的,嵌套模式验证

    我正在尝试根据用户选择的选择选项有条件地验证对象 问题是我正在渲染货币列表 并且在尝试将其设为必填字段时遇到巨大困难 因为我必须传入一个空的对象开始 我的代码堆栈是 React Formik 和 Yup 所有最新版本 对象模式 catego