如何使用Yup实现当boughtby值为'none'时触发校验错误

1. 调整Yup校验规则 #

原来的required仅校验空字符串，现在可以用notOneOf指定不允许的值集合（空字符串和"none"），同时确保字段必须有合法值：

const NewUserSchema = Yup.object().shape({
  createDate: Yup.string().nullable().required('Create date is required'),
  boughtby: Yup.string()
    .notOneOf(['', 'none'], 'Cannot be none or empty') // 明确禁止空字符串和"none"
    .required('Cannot be none or empty') // 兜底校验确保字段有有效值
});

2. 设置"none"为默认值 #

直接修改defaultValues里的boughtby字段，把 fallback 值从空字符串改成"none"：

const defaultValues = useMemo(
  () => ({
    createDate: details?.dealDetails[0]?.created_date || null,
    boughtby: details?.dealDetails[0]?.bought_by || "none", // 这里替换为"none"作为默认值
  }),
  [details] // 建议移除eslint禁用注释，保证依赖数组完整，避免缓存异常
);

完整修改后代码 #

const NewUserSchema = Yup.object().shape({
  createDate: Yup.string().nullable().required('Create date is required'),
  boughtby: Yup.string()
    .notOneOf(['', 'none'], 'Cannot be none or empty')
    .required('Cannot be none or empty')
});

const defaultValues = useMemo(
  () => ({
    createDate: details?.dealDetails[0]?.created_date || null,
    boughtby: details?.dealDetails[0]?.bought_by || "none",
  }),
  [details]
);

const methods = useForm({
  resolver: yupResolver(NewUserSchema),
  defaultValues,
});

补充说明 #

• notOneOf(['', 'none'], ...) 会直接校验字段值是否在禁止列表中，只要匹配就抛出指定的错误提示
• 默认值设为"none"后，表单初始化时会加载该值，但因为校验规则禁止它，会立刻触发错误提示，完全符合需求
• 尽量不要保留eslint-disable-next-line react-hooks/exhaustive-deps注释，依赖数组不完整可能导致useMemo缓存不更新，引发潜在bug

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