Yup when 条件判断语法更新：告别 is 属性，拥抱回调函数

---

本文旨在解决Yup版本更新（0.26.6到1.2.0及更高版本）后，`Yup.when` 方法中 `is` 属性不再被支持的问题。我们将详细介绍如何将旧的对象式条件判断转换为新的回调函数式语法，以确保表单验证逻辑的兼容性和正确性，避免在ReactJS等应用中遇到类型错误。

在现代前端开发中，表单验证库如Yup因其强大的功能和简洁的API而广受欢迎。然而，随着库版本的迭代，API有时会发生变化。本文将重点探讨在将Yup从旧版本（例如0.26.6）升级到新版本（例如1.2.0及更高版本）时，Yup.when 方法中 is 属性不再有效的问题，并提供详细的迁移指南和示例，帮助开发者顺利过渡。

旧版 Yup.when 的用法与局限性

在Yup的早期版本中，Yup.when 方法允许开发者根据其他字段的值来动态调整当前字段的验证规则。其中，一种常见的用法是通过 is 属性直接指定一个布尔值或特定值作为条件判断。例如，当某个布尔字段为 true 时，应用一组验证规则：

import * as Yup from 'yup';
// 假设 domainName 是一个已定义的正则表达式

export default Yup.object({
    enabled: Yup.boolean(),
    hostname: Yup.string().when('enabled', {
        is: true, // 旧版语法：直接使用 'is' 属性
        then: Yup.string()
            .matches(domainName, '请提供一个完全限定域名')
            .required('您必须提供一个主机名'),
        otherwise: Yup.string().notRequired(),
    }),
});

然而，当升级到Yup 1.x版本后，上述代码会触发类似 Object literal may only specify known properties, and 'is' does not exist in type 'ConditionBuilder<...>' 的类型错误。这表明 is 属性已被废弃或其用法已发生根本性改变。

新版 Yup.when 的回调函数语法

Yup 1.x版本对 when 方法进行了重大改进，引入了基于回调函数的新语法，提供了更强大的灵活性和更清晰的类型推断。现在，when 方法的第二个参数不再是一个包含 is 属性的对象，而是一个接收回调函数的参数。这个回调函数接收两个参数：

1. values (或解构后的 [value]): 一个数组，包含 when 方法所监听的字段的当前值。如果只监听一个字段，通常会解构为 [value]。
2. schema: 当前字段的Schema实例，允许你在回调函数内部对其进行链式调用以应用不同的验证规则。

新的语法结构如下：

fieldName: Yup.string().when('watchedFieldName', ([watchedValue], schema) => {
    // 根据 watchedValue 的值返回不同的 schema 实例
    if (watchedValue === someCondition) {
        return schema.required('此字段为必填');
    }
    return schema.notRequired();
});

示例：将布尔条件转换为回调函数

让我们将最初的 hostname 字段的验证逻辑迁移到新语法。原先的 is: true 条件现在需要通过回调函数来判断 enabled 字段的值。

旧版代码 (Yup v0.26.6):

MarketingBlocks AI

AI营销助理，快速创建所有的营销物料。

27 查看详情

hostname: Yup.string().when('enabled', {
    is: true,
    then: Yup.string()
        .matches(domainName, '请提供一个完全限定域名')
        .required('您必须提供一个主机名'),
    otherwise: Yup.string().notRequired(),
}),

新版代码 (Yup v1.2.0+):

import * as Yup from 'yup';
// 假设 domainName 是一个已定义的正则表达式，例如：
// import helpers from '../../../Shared/validationHelpers';
// const { domainName } = helpers.regEx;

export default Yup.object({
    enabled: Yup.boolean(),
    hostname: Yup.string().when('enabled', ([enabledValue], schema) => {
        return enabledValue // 检查 enabledValue 是否为真
            ? schema
                .matches(domainName, '请提供一个完全限定域名')
                .required('您必须提供一个主机名')
            : schema.notRequired();
    }),
});

在这个例子中，([enabledValue], schema) 回调函数会检查 enabledValue 是否为真。如果为真，则返回应用了 matches 和 required 规则的 schema；否则，返回应用了 notRequired 规则的 schema。

示例：处理更复杂的条件判断

新版 when 方法的回调函数不仅能处理简单的布尔条件，还能轻松应对更复杂的逻辑，例如判断一个值是否在某个列表中。

场景： 根据 marital_status（婚姻状况）字段的值，动态决定 companion_name（伴侣姓名）字段是否必填。假设当 marital_status 为 'C', 'D', 'E' 时，companion_name 必填。

import * as Yup from 'yup';

export const userSchema = Yup.object({
    marital_status: Yup.string().required('请选择婚姻状况'),
    companion_name: Yup.string().when('marital_status', ([maritalStatus], schema) => {
        return ['C', 'D', 'E'].includes(maritalStatus) // 检查 maritalStatus 是否在指定列表中
            ? schema
                .trim()
                .min(2, '伴侣姓名至少需要2个字符')
                .required('伴侣姓名是必填项')
            : schema.notRequired();
    }),
});

此示例清晰展示了如何在回调函数内部利用J*aScript的条件逻辑来构建动态的验证规则。includes 方法用于检查 maritalStatus 是否属于特定集合，从而决定返回何种 schema。

注意事项

在迁移和使用新版 Yup.when 时，请注意以下几点：

• 版本兼容性： 确保您的Yup版本至少为1.x。旧版Yup不识别此新语法。
• 参数解构： 回调函数的第一个参数是一个数组。即使只监听一个字段，也建议使用数组解构 ([value]) 来获取其值，这有助于保持代码风格一致性，并且在未来需要监听多个字段时更易于扩展。
• 返回Schema： 回调函数必须始终返回一个 Yup.Schema 实例。这是关键，因为Yup会使用这个返回的Schema来执行后续的验证。
• 链式调用： 在回调函数内部，您可以对传入的 schema 参数进行链式调用，添加或修改验证规则。
• 多字段监听： 如果 when 方法监听了多个字段（例如 when(['fieldA', 'fieldB'], ...)），回调函数的第一个参数将是一个包含这些字段值的数组，顺序与监听的字段名顺序一致。

总结

Yup库的持续发展带来了API的演进，旨在提供更强大、更灵活的验证机制。Yup.when 方法从对象式 is 属性到回调函数式语法的转变，是其提升功能性和类型安全性的一个重要体现。通过理解并掌握新的回调函数语法，开发者可以更有效地构建复杂的、动态的表单验证逻辑，确保应用在升级后依然稳定可靠。在进行库版本升级时，务必查阅官方文档，了解所有可能影响现有代码的API变更。

以上就是Yup when 条件判断语法更新：告别 is 属性，拥抱回调函数的详细内容，更多请关注其它相关文章！

# 必填  # 少seo  # 浙江seo公司怎么做好  # 海珠响应式网站建设  # 淘客网seo  # 吕梁网站设计推广公司  # 苏州枫雅装饰seo招聘  # 平台营销推广流程怎么写  # 哈尔滨seo优化指南  # 武侯营销推广哪家好  # 天门seo多少钱  # 第一个  # 您必须  # 布尔  # 旧版  # react  # 提供一个  # 是一个  # 链式  # 表单  # 回调  # red  # ai  # 前端开发  # 回调函数  # 正则表达式  # 前端  # js  # java  # javascript 

相关栏目： 【 Google疑问12 】 【 Facebook疑问10 】 【 优化推广96088 】 【 技术知识133117 】 【 IDC资讯59369 】 【 网络运营7196 】 【 IT资讯61894 】

相关推荐： Win10如何关闭操作中心通知 Win10免打扰设置全攻略【清爽】  使用逻辑应用（Logic Apps）自动处理邮件附件中的XML到Excel  海棠阅读网页版_进入海棠网页版在线阅读中心  TikTok私信无法发送表情怎么办 TikTok消息表情发送修复方法  《火花chat》搜索好友方法  SQLAlchemy 2.0 与 Pydantic 模型类型安全集成指南  《气泡星球》兑换码礼包大全  iCloud官方网站 iCloud网页版在线登录入口  纯CSS实现自适应宽度与响应式布局的水平按钮组  在Django单元测试中优雅处理信号：基于环境的条件执行策略  视频号视频怎么免费保存到相册？保存到相册需要注意什么？  包子漫画在线观看入口 包子漫画网正版全集链接  如何在 WordPress 前端实现内容提交：古腾堡编辑器的替代方案与实践  c++类和对象到底是什么_c++面向对象编程基础  J*aScript 数值去小数位处理：多种方法与实践  如何查询个人病历记录  Excel宏怎么删除_Excel中删除宏的详细操作流程  使用document.execCommand实现Web文本编辑器加粗/取消加粗  铁路12306入口 铁路12306官网版入口登录网址  如何在CSS中使用absolute实现登录弹窗居中_transform translate结合  XPath动态元素定位：如何精准选择文本内容变化的元素  TikTok视频播放中断怎么办 TikTok播放异常修复方法  鸣潮历史学家灯塔位置一览  蜻蜓FM如何设置移动流量播放  《领英》查看屏蔽名单方法  windows10怎么开启wsl_windows10安装linux子系统教程  电脑桌面图标怎么变大变小_Windows个性化设置第一课【新手入门】  微信客户端怎么查看二维码_微信客户端个人二维码查看方法  顺丰快递收费标准查询_如何查看顺丰最新收费价格  t3出行如何使用微信支付  C++ virtual析构函数作用_C++基类虚析构函数防止内存泄漏  百度浏览器无法安装扩展程序_百度浏览器插件安装失败原因解析  PPT智能排版生成入口 免费PPT内容自动生成平台  抖音小程序怎么开通？小程序开通条件是什么？  win11资源管理器标签页怎么用 Win11文件管理器多标签高效操作【新功能】  Python csv 模块处理非字符串数据：列表写入 CSV 文件的机制解析  《我的恋爱逃生攻略》中文名字输入方法  Mac hosts文件在哪里_Mac修改hosts文件详细教程  批改网网页版登录 批改网电脑版学生登录入口  我居然低估了 DeepSeek，这次更新它做到了这些！  在Spring Boot Thymeleaf中利用布尔属性实现容器的条件显示  tiktok国际版入口_tiktok官网网页版链接  AI图层蒙版怎么用_AI图层蒙版应用技巧与设计实例  ExcelSCAN与LAMBDA如何创建自定义移动平均函数_SCAN实现任意窗口期移动平均计算  Animex动漫社社登录官网 Animex动漫社资源社入口直达  《雅迪智行》用手机开锁方法  被称为海蜈蚣的海洋动物是  sublime怎么快速在浏览器中预览HTML_sublime配置View in Browser教程  Selenium自动化：利用键盘模拟解决复杂日期输入框输入问题  圆通快递官网入口查询单号 手机版官方查询入口 

 2025-11-13