Formik & Yup如何验证用户年龄是否满18周岁？

嘿，我一眼就瞅出你代码里的问题啦！问题出在differenceInYears的参数顺序上——date-fns的这个方法是用第一个日期减去第二个日期来计算年份差的，你现在完全写反啦！

你原来的代码是：

differenceInYears(value, new Date()) >= 18

这里value是用户输入的生日（肯定早于当前日期），用生日减当前日期得到的是负数，永远小于18，难怪不管怎么输入都会触发验证错误！

正确的实现步骤： #

1. 修正参数顺序：把当前日期放在第一个参数，生日放在第二个，这样计算出来的才是用户的实际年龄：

   differenceInYears(new Date(), value) >= 18
   

2. 处理nullable字段：因为你的日期字段设置了.nullable()，所以要先判断value是否为null，避免出现计算错误，这种空值情况应该直接返回true（允许空值通过验证）。

完整的验证代码示例： #

import differenceInYears from "date-fns/differenceInYears";

// 你的validationSchema部分
const validationSchema = Yup.object().shape({
  dob: Yup.date()
    .nullable()
    .test(
      "dob",
      "Should be greater than 18",
      function (value) {
        // 如果字段为空，直接通过验证
        if (!value) return true;
        // 计算当前日期与生日的年份差
        const age = differenceInYears(new Date(), value);
        return age >= 18;
      }
    ),
});

额外小优化： #

如果担心用户输入未来的日期（比如还没出生的日期），可以再加一个验证规则，确保生日不晚于当前日期：

dob: Yup.date()
  .nullable()
  .max(new Date(), "Birth date cannot be in the future") // 新增规则
  .test(
    "dob",
    "Should be greater than 18",
    function (value) {
      if (!value) return true;
      const age = differenceInYears(new Date(), value);
      return age >= 18;
    }
  ),

这样就能完美实现年满18周岁的日期验证啦！

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