Yup表单验证遇循环依赖错误，求解决三字段至少填一的校验问题

错误原因 #

你的Schema中存在字段间的循环引用：username的when规则依赖phone字段，而phone的when规则又反过来依赖username字段。Yup在处理这种交叉依赖时会检测到循环，从而抛出Cyclic dependency错误。

修正方案 #

不要在单个字段上用when互相依赖，而是在整个对象级别添加自定义验证规则，直接检查三个字段中至少填写一个：

const userSchema = yup
  .object()
  .shape({
    username: yup.string(),
    email: yup.string().email('Please enter a valid email'),
    phone: yup.string(),
    password: yup
      .string()
      .min(8, 'Password must be 8 characters long')
      .matches(/[0-9]/, 'Password requires a number')
      .matches(/[a-z]/, 'Password requires a lowercase letter')
      .matches(/[A-Z]/, 'Password requires an uppercase letter')
      .matches(/[^\w]/, 'Password requires a symbol')
      .required('Password is required')
  })
  .test(
    'at-least-one-contact',
    '请填写用户名、邮箱或电话中的至少一项',
    (values) => {
      // 检查三个字段中至少有一个非空
      return !!values.username || !!values.email || !!values.phone;
    }
  )
  .required();

说明 #

• 移除了username和phone上的when规则，彻底避免字段间的循环引用
• 通过object.test方法添加全局验证，直接校验业务核心需求：三个联系字段至少填写一个
• 错误提示可根据场景调整，统一提示能让用户更清晰地理解要求

内容的提问来源于stack exchange，提问作者envy