React Yup when方法详解，如何实现条件验证与密码确认？
你是不是也遇到过这种情况——表单里一个字段是否必填，得看另一个字段的值是什么？比如“密码”和“确认密码”必须一致，或者某个选项勾选后，才需要填写更多信息？这种条件验证用普通方法写起来真是头大，各种if-else嵌套，代码又长又难维护😫。别急，Yup的when方法就是专门解决这个痛点的神器！
作为一个React老鸟，我用Yup做过不下几十个表单，今天就来聊聊when方法到底怎么用才能既高效又省心。
1. Yup when方法的基本语法
when方法允许你根据其他字段的值来动态改变当前字段的验证规则。它的基本结构长这样：
javascript下载复制运行Yup.类型().when('依赖字段名', ([依赖字段值], schema) => { if (条件满足) { return schema.添加的验证规则; // then的情况 } return schema.其他规则; // otherwise的情况 });
说实话，我第一次看到这个语法也有点懵，但用个一两次就发现比旧版的is属性灵活多了。新版Yup（1.x以后）全面采用这种函数式回调，虽然学习曲线稍微陡一点，但能实现更复杂的逻辑。
2. 条件验证实战：布尔值依赖
举个最常见的例子，比如有个“启用高级设置”的开关（布尔值），打开后才需要填写“服务器地址”：
javascript下载复制运行const schema = Yup.object({ enableAdvanced: Yup.boolean(), serverUrl: Yup.string().when('enableAdvanced', ([enableAdvanced], schema) => { return enableAdvanced ? schema.required('开启高级功能后必须填写服务器地址').matches(urlRegex, 'URL格式不正确') : schema.notRequired(); }) });
这样写的好处是，验证规则和界面状态完全同步，用户不会看到莫名其妙的“必填”错误提示。我个人的经验是，布尔值条件是最常用也是最不容易出错的，非常适合入门练习。
3. 密码确认验证的经典场景
另一个高频需求就是注册时的密码确认。用when方法结合oneOf可以轻松实现：
javascript下载复制运行const schema = Yup.object({ password: Yup.string().min(, '密码至少8位').required(), confirmPassword: Yup.string().when('password', ([password], schema) => { return password ? schema.required('请确认密码').oneOf([Yup.ref('password')], '两次输入密码不一致') : schema.notRequired(); }) });
这里有个小技巧：我一般会先检查password是否有值，如果没有的话，连confirmPassword的验证都不需要触发，避免给用户造成干扰。这种细小的体验优化，用户可能说不出来哪里好，但用起来就是觉得顺心。
4. 多字段依赖与复杂条件
如果需要根据多个字段的值来做判断，比如“支付方式”选择信用卡时，才验证信用卡相关字段：
javascript下载复制运行const schema = Yup.object({ paymentMethod: Yup.string().oneOf(['credit', 'paypal']), cardNumber: Yup.string().when(['paymentMethod', 'country'], ([paymentMethod, country], schema) => { if (paymentMethod === 'credit' && country === 'US') { return schema.required('美国地区信用卡支付需要填写卡号').length(, '卡号必须16位'); } return schema.notRequired(); }) });
多字段依赖时，回调函数的第一个参数是个数组，顺序和when的第一个参数数组保持一致。这个功能特别强大，但我也踩过坑——记得做好空值判断，不然容易遇到Cannot read property of undefined这种错误。
5. 常见问题与解决技巧
5.1 版本兼容性问题
如果你从Yup 0.26.x升级到1.x，可能会发现旧的is属性写法报错了。这是因为新版本完全转向了函数式回调。解决方法是按本文的示例重写条件验证部分。
5.2 验证不触发
有时候改了依赖字段的值，但条件验证没反应。这通常是因为字段名不匹配——检查一下when里的字段名和initialValues里的字段名是否完全一致，包括大小写。
5.3 错误信息位置不对
在用Formik或React Hook Form时，条件验证的错误信息可能显示在不合适的位置。我常用的解决方法是给条件字段设置独立的touched管理，而不是依赖表单级的触碰状态。
6. 我的使用心得
用了这么多年前端验证，我觉得Yup的when方法最大的优势是声明式语法——你只需要描述“什么情况下应该怎样验证”，而不需要写一堆命令式的if-else逻辑。
不过它也不是万能的，对于特别复杂的、跨多个页面的条件逻辑，我建议还是把它和自定义验证函数结合使用。毕竟，没有哪个工具能解决所有问题，合适的场景用合适的方案才是王道。
总的来说，掌握好when方法，能让你在React表单开发中节省至少30%的条件验证代码量。希望这些经验对你有所帮助！如果你在实践中遇到其他问题，欢迎一起讨论💪。