本文介绍如何使用 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，避免运行时错误；
- 前端校验不可替代服务端校验——此逻辑必须在后端重复实现，以保障安全性。
