如何为Yup表单字段配置两个date.min()日期验证规则？

你遇到的核心问题是连续调用两次.min()方法会导致第一个验证规则被覆盖——Yup的链式API里，相同类型的验证器（比如min），后面的配置会直接替换掉前面的。所以你的原代码里，只有“到期日晚于签发日”的规则在生效，“晚于今日”的规则被丢弃了。

下面是两种清晰可行的Schema写法，任选其一即可：

写法一：先验证“晚于今日”，再自定义验证“晚于签发日” #

date: Yup.date()
  // 先确保日期晚于当前时间
  .min(new Date(), 'Date must be later than today.')
  // 自定义规则检查是否晚于签发日
  .test(
    'is-after-issue-date',
    'Expiry date must be greater than issue date',
    function(value) {
      // 通过this.parent拿到表单里的签发日字段值
      const issueDate = this.parent.issueDate;
      // 签发日未填写时默认通过，否则验证到期日是否更大
      return !issueDate || value > issueDate;
    }
  )
  .typeError('Please provide a valid date')
  .required('Please specify the expiry date')

写法二：先验证“晚于签发日”，再自定义验证“晚于今日” #

如果你觉得逻辑顺序反过来更合理，也可以这么写：

date: Yup.date()
  // 先绑定签发日的关联验证
  .min(Yup.ref('issueDate'), 'Expiry date must be greater than issue date')
  // 自定义规则检查是否晚于今日
  .test(
    'is-after-today',
    'Date must be later than today.',
    (value) => value > new Date()
  )
  .typeError('Please provide a valid date')
  .required('Please specify the expiry date')

补充说明：为什么原代码不生效？ #

你的原代码片段：

date: Yup.date().min(new Date(), 'Date must be later than today.').min(Yup.ref('issueDate'), 'Expiry date must be greater than issue date').typeError('Please provide a valid date').required('Please specify the expiry date')

Yup的.min()方法每次调用都会覆盖之前的同类型规则，所以这段代码最终只有最后一个.min(Yup.ref('issueDate'))在工作，“晚于今日”的验证逻辑被完全覆盖了，这就是验证失效的根本原因。

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