在React useHookForm中如何实现年龄小于5岁时抛出校验错误

解决方案 #

你可以通过 react-hook-form 自定义校验规则 + 日期输入框动态max属性 组合实现需求，同时修复原代码中max="2000-13-13"的无效日期错误，具体实现如下：

首先新增计算5年前日期的工具函数：

// 计算当前日期往前推5年的标准日期，格式为YYYY-MM-DD
const getFiveYearsAgo = () => {
  const date = new Date();
  date.setFullYear(date.getFullYear() - 5);
  return date.toISOString().split('T')[0];
};
const fiveYearsAgo = getFiveYearsAgo();

修改你的表单组件代码：

<div class="input-group date" data-provide="datepicker">
  <input
    {...register("dob", {
      required: true,
      // 新增自定义年龄校验规则
      validate: (value) => {
        const selectedDate = new Date(value);
        const minBirthDate = new Date(fiveYearsAgo);
        // 选中日期晚于5年前的日期，说明年龄不足5岁
        return selectedDate <= minBirthDate || "年龄需满5周岁";
      }
    })}
    type="date"
    id="birthday"
    min="1899-01-01"
    {/* 把固定无效max替换为动态计算的5年前日期，用户无法直接选中不符合要求的日期 */}
    max={fiveYearsAgo}
    class="form-control"
    onClick={set}
  />
  {errors?.dob?.type === "required" && (
    <p>该字段为必填项</p>
  )}
  {/* 新增年龄不足的错误提示 */}
  {errors?.dob?.type === "validate" && (
    <p>{errors.dob.message}</p>
  )}
  <div class="input-group-addon">
    <span class="glyphicon glyphicon-th"></span>
  </div>
</div>

实现说明

• 动态设置max属性：从输入层直接限制用户可选的最晚日期为5年前的今日，普通用户无法选中不符合要求的日期，体验更友好
• 自定义校验规则做兜底：即使用户通过调试工具修改页面属性绕过输入限制，提交时也会触发校验，保证数据正确性
• 自动适配年份：不需要每年手动修改触发校验的年份阈值，逻辑会自动根据当前日期计算

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