本文介绍如何使用 yup 的 ref() 和 notoneof() 实现字段间依赖校验，重点解决“密码不得包含用户名”这一常见安全需求，并提供可直接运行的代码示例与关键注意事项。
在表单验证中，仅对单个字段做独立校验往往不够——例如安全规范常要求“密码不能包含用户名”，这就需要基于另一个字段的值动态校验当前字段。Yup 本身不支持在正则表达式中直接插值（如 /(?!.*${username})/），但提供了更健壮、语义更清晰的跨字段引用机制：Yup.ref()。
Yup.ref(key) 会创建一个对同级对象中指定字段（如 ‘username’）的运行时引用，其值在每次验证时实时获取，而非定义时固化。配合 notOneOf([ref, …])，即可精准实现“密码值不得等于用户名”的基础校验：
import * as Yup from 'yup'; const schema = Yup.object({ username: Yup.string() .required('Username is required') .matches( /^[a-zA-Z0-9_-]+$/, 'The username should contain only alphanumeric characters, underscores and hyphens' ), password: Yup.string() .required('Password is required') .matches( /^(?=.*?[A-Z])(?=.*[a-z])(?=.*d)(?=.*W).{8,}$/, 'The password should contain upper and lowercase letters, numbers and special characters' ) .notOneOf([Yup.ref('username'), NULL], 'The password must not be identical to the username') });⚠️ 注意：notOneOf 是完全匹配校验（即密码值 === 用户名值），适用于禁止密码与用户名完全相同的情形。但若需更严格的“密码不得包含用户名子串”（例如用户名为 john，密码 MyJohn123! 也应被拒绝），则需使用 test() 自定义校验器：
password: Yup.string() .required('Password is required') .matches( /^(?=.*?[A-Z])(?=.*[a-z])(?=.*d)(?=.*W).{8,}$/, 'The password should contain upper and lowercase letters, numbers and special characters' ) .test( 'password-not-include-username', 'The password must not contain the username', function(value) { const { username } = this.parent; // 忽略大小写检查子串包含关系 return !value || !username || !value.toLowerCase().includes(username.toLowerCase()); } )该 test() 方法通过 this.parent 访问整个表单对象，确保上下文完整；同时加入空值防护与大小写不敏感处理，兼顾鲁棒性与用户体验。
✅ 总结建议：
- 优先使用 Yup.ref() + notOneOf() 处理精确相等的跨字段约束；
- 对子串包含、长度关联、条件必填等复杂逻辑，统一采用 .test() 并利用 this.parent 获取上下文；
- 始终在自定义校验中防御性检查 null/undefined，避免运行时错误；
- 前端校验不可替代服务端校验——此逻辑必须在后端重复实现，以保障安全性。