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):

Tanka

具备AI长期记忆的下一代团队协作沟通工具

146 查看详情

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网络营销条件  # h5动效网站营销推广  # 专业的网站建设特征  # 浙江省中档服装网站建设  # 万全网站建设推广  # 第一个  # 您必须  # 布尔  # 旧版  # react  # 提供一个  # 是一个  # 链式  # 表单  # 回调  # red  # ai  # 前端开发  # 回调函数  # 正则表达式  # 前端  # js  # java  # javascript 

相关文章： 机构：以往存储涨价周期小米利润率实际上有所改善 能转嫁给消费者等  三星ZFold5多任务卡顿_Samsung ZFold5流畅度提升  2025AO3夸克浏览器通道_AO3手机HTTPS安全入口分享  Go语言中的*string：深入理解字符串指针  俄罗斯Yandex免登录入口_Yandex搜索引擎官网一键直达  如何在Promise链中优雅地中断后续then执行  使用 Pandas 高效处理 .dat 文件：数据清洗与数值计算实战  网易大神账号申诉需要多久_网易大神账号申诉流程说明  iwriter统一登录平台 iwrite账号密码登录页面  在J*a中如何开发简易电子商务商品管理系统_商品管理系统项目实战解析  Composer的 "licenses" 命令如何帮助你遵守开源协议_检查项目依赖的许可证合规性  j*a toString()的覆盖  海量存储：机器视觉智能化的核心基石  在Go语言中利用后缀数组处理多字符串：实现高效文本匹配与自动补全  word邮件合并后日期格式不对怎么改_Word邮件合并日期格式修改方法  c++如何实现一个简单的软件渲染器_c++从零开始的3D图形学  腾讯QQ邮箱官方网站_QQ邮箱网页版在线登录  12306选座怎么选到特殊座位_12306特殊座位选择注意事项  QQ邮箱在线登录平台 QQ邮箱个人邮箱网页版入口  QQ官网正版登录链接 QQ在线登录入口最新  sublime侧边栏怎么增强功能_SideBarEnhancements for sublime安装与配置  PPT平滑切换怎么做 PPT炫酷“平滑”切换动画制作教程【必学】  在J*aScript中复现SciPy的B样条拟合与求值：关键考量  如何在离线环境中使用Composer_Composer离线安装依赖包的技巧与策略  解决Rails应用中内容错位与Turbo警告：meta标签误用导致富文本渲染异常  必由学在线入口 必由学网页版快速登录入口  微信网页版官方入口直达 微信网页版网页版登录使用方法  Lar*el Migration：重命名列后添加新列的正确操作顺序  邮政快递单号查询入口 邮政快递物流信息在线查询入口  AWS EC2实例间SQL Server连接超时：安全组配置与故障排除指南  C#中解析不规范的HTML为XML 常见的坑与解决办法  J*aScript井字棋（Tic-Tac-Toe）核心交互逻辑实现教程  Win11 USB传输速度慢怎么解决 Win11 USB驱动更新与设置  cad怎么合并重叠的线段_cad清理重复重叠线条的操作方法  马斯克：Optimus 人形机器人复数形式为 Optimi  BetterDiscord插件中安全更新用户简介的实践指南  PHP中SSG-WSG API的AES加密实践：正确使用初始化向量  Win10如何清理注册表垃圾 Win10手动清理无效注册表【技巧】  Pandas DataFrame 多条件优先级排序与排名  WooCommerce 购物车显示所有交叉销售商品教程  excel怎么制作工资条 excel快速生成工资条的方法  夸克AO3官网入口_AO3镜像网站2025推荐  vivo云服务网页版登录 怎么登录vivo云服务网页版  实现分段式页面滚动导航：CSS与J*aScript教程  汽水音乐在线解析 汽水音乐在线解析入口  树莓派传感器触发：通过Twilio API发送WhatsApp消息教程  知音漫客正版漫画平台_知音漫客官网账号登录  GemBox Document HTML转PDF垂直文本渲染问题及解决方案  QQ邮箱网页版快速登录 QQ邮箱邮箱账号官方入口地址  Sublime Text怎么显示空格和制表符_Sublime显示不可见字符设置