React中为number类型输入框设置长度限制的最高效实现方法

架构老林

2026-9-25

React 出生日期输入框位数限制最优方案

核心实现逻辑为输入时实时拦截+原生属性辅助校验，兼顾输入体验与逻辑复用性，具体实现步骤如下：

步骤1：修改日期处理函数

在handleDateChange中统一处理不同字段的长度限制，同时自动过滤非数字输入，避免用户输入非法内容：

const handleDateChange = (e) => {
  const { name, value } = e.target;
  // 配置不同字段的最大输入位数
  const fieldMaxLength = {
    month: 2,
    day: 2,
    year: 4
  };
  // 仅保留数字，且截断超出最大位数的内容
  const validValue = value.replace(/\D/g, '').slice(0, fieldMaxLength[name]);
  // 更新状态
  setValues(prev => ({
    ...prev,
    dateOfBirth: {
      ...prev.dateOfBirth,
      [name]: validValue
    }
  }));
};

步骤2：补充输入框原生属性

给三个输入框添加范围、长度相关原生属性作为辅助校验，适配键盘上下键调整数值的场景也不会超出合理范围：

<input
  name="month"
  value={values.dateOfBirth.month}
  onChange={(e) => handleDateChange(e)}
  type="number"
  placeholder="MM"
  min={1}
  max={12}
  className={dateErr ? "error" : ""}
/>
<br />
<input
  name="day"
  value={values.dateOfBirth.day}
  onChange={(e) => handleDateChange(e)}
  type="number"
  placeholder="DD"
  min={1}
  max={31}
  className={dateErr ? "error" : ""}
/>
<br />
<input
  name="year"
  value={values.dateOfBirth.year}
  onChange={(e) => handleDateChange(e)}
  type="number"
  placeholder="YYYY"
  min={1900}
  max={new Date().getFullYear()}
  className={dateErr ? "error" : ""}
/>