基于Formik的Yup日期验证：禁止选择今日及过往日期

要实现「职位发布开始日期不能是今日或过往日期」的验证，直接用Yup的自定义test规则就能搞定，具体代码和说明如下：

完整验证Schema代码 #

import * as yup from 'yup';

const validationSchema = yup.object({
  startDate: yup.string()
    .required("请填写此字段。")
    .nullable()
    .test(
      'is-future-date',
      "发布日期不能是今天或过去的日期，请选择未来的日期。",
      function(value) {
        // 空值交由required规则处理，这里直接返回true
        if (!value) return true;
        
        const inputDate = new Date(value);
        const todayStart = new Date();
        // 将今日时间重置为0点0分0秒，避免时分秒干扰日期判断
        todayStart.setHours(0, 0, 0, 0);
        
        // 确保输入日期严格大于今日起始时间（即明天及以后）
        return inputDate > todayStart;
      }
    ),
});

关键逻辑说明 #

• 用test方法自定义验证逻辑，三个参数分别是验证标识、错误提示文案、验证函数
• 把今日时间重置为0点，是为了避免用户选择「今天的某个晚于当前时间」的情况，确保整个今日都被禁止
• 空值判断是因为已经配置了required规则，空值会先触发必填提示，这里不重复拦截

与Formik集成 #

你原有的Formik初始化代码不需要改动，直接使用上面新的validationSchema即可：

const formik = useFormik({
  initialValues,
  enableReinitialize: true,
  validationSchema: validationSchema,
  onSubmit,
});

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