Yup使用matches校验非必填字段仍触发数字格式报错问题求助

核心原因 #

• yup.string()类型默认将空字符串""识别为有效字符串入参，.notRequired()方法仅对null、undefined值生效，标记这两类值不需要通过必填校验，不会拦截空字符串进入后续校验链，因此空值提交时会正常执行matches正则校验，触发「only digits」错误。

可用修复方案 #

方案1：空值前置转换（全版本兼容，优先使用） #

在校验链起始位置增加值转换逻辑，将无实际内容的空字符串转为undefined，Yup遇到undefined值会自动跳过后续所有非必填类校验规则：

yup.string()
  // 空内容转undefined，跳过后续格式、长度校验
  .transform(value => value?.trim() === '' ? undefined : value)
  .notRequired()
  .matches(/^[0-9]+$/, 'only digits')
  .min(10, 'exactly 10 digits')
  .max(10, 'exactly 10 digits')

方案2：条件分支校验 #

通过when方法做判断，仅当字段存在有效输入值时，才挂载格式、长度校验规则：

yup.string()
  .notRequired()
  .when({
    is: val => val && val.trim().length > 0,
    then: rule => rule
      .matches(/^[0-9]+$/, 'only digits')
      .min(10, 'exactly 10 digits')
      .max(10, 'exactly 10 digits')
  })

注意事项 #

• 若业务场景允许输入数字间空格，可将正则恢复为/^[0-9 ]+$/，但需要同步调整长度校验逻辑，避免空格占用字符位导致实际数字长度不符合10位要求。

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