如何用JavaScript实现文本框仅允许DD-MM-YYYY格式输入

需求明确 #

输入框必须为text类型，仅接受DD-MM-YYYY格式的日期输入，具体规则：

• 日（DD）：1-28/29/30/31，需根据对应年月自动适配合法天数
• 月（MM）：1-12
• 年（YYYY）：0001-9999
• 仅允许-作为分隔符，且位置固定在第2位和第5位字符后
• 输入总长度不得超过10位

完整实现代码 #

<form>
  <input type="text" id="dateInput" maxlength="10" placeholder="DD-MM-YYYY" />
</form>

<script>
const dateInput = document.getElementById('dateInput');

dateInput.addEventListener('input', function() {
  // 过滤非数字和非-的非法字符
  let inputVal = this.value.replace(/[^0-9-]/g, '');

  // 自动补充分隔符：输入2位数字后加-，输入到第5位（月份2位）后加-
  if (inputVal.length === 2 && !inputVal.includes('-')) {
    inputVal += '-';
  } else if (inputVal.length === 5 && inputVal.charAt(2) === '-' && !inputVal.includes('-', 3)) {
    inputVal += '-';
  }

  // 拆分日期各部分
  const [dayPart, monthPart, yearPart] = inputVal.split('-');
  let validParts = [];

  // 验证并修正日部分
  if (dayPart) {
    let day = parseInt(dayPart, 10);
    // 先限制日的基础范围1-31
    if (day < 1 || day > 31) {
      validParts.push(dayPart.slice(0, -1));
    } else {
      // 若已输入月份，验证该月的最大合法天数
      if (monthPart) {
        const month = parseInt(monthPart, 10);
        const year = yearPart ? parseInt(yearPart, 10) : new Date().getFullYear();
        const maxValidDay = new Date(year, month, 0).getDate();
        validParts.push(day > maxValidDay ? maxValidDay.toString() : dayPart);
      } else {
        validParts.push(dayPart);
      }
    }
  }

  // 验证并修正月部分
  if (monthPart) {
    let month = parseInt(monthPart, 10);
    // 限制月份1-12，超出则截断最后一位
    if (month < 1 || month > 12) {
      validParts.push(monthPart.slice(0, -1));
    } else {
      // 去除无效的0开头（如03转为3，避免00这类无效值）
      const cleanMonth = monthPart.startsWith('0') && month < 10 ? monthPart.slice(1) : monthPart;
      validParts.push(cleanMonth.length > 2 ? cleanMonth.slice(0, 2) : cleanMonth);
    }
  }

  // 验证并修正年部分
  if (yearPart) {
    // 限制年份为4位，超出则截断
    let trimmedYear = yearPart.slice(0, 4);
    const yearNum = parseInt(trimmedYear, 10);
    // 确保年份在0001-9999范围内，超出则截断最后一位
    if (yearNum < 1 || yearNum > 9999) {
      trimmedYear = trimmedYear.slice(0, -1);
    }
    validParts.push(trimmedYear);
  }

  // 重新拼接为合法格式，限制总长度不超过10位
  let finalVal = validParts.join('-');
  if (finalVal.length > 10) {
    finalVal = finalVal.slice(0, 10);
  }

  this.value = finalVal;
});
</script>

代码功能说明 #

1. 非法字符过滤：直接剔除数字和-以外的所有字符，从源头避免无效输入
2. 自动分隔符补全：用户输入2位数字后自动添加-，输入到第5位（即月份输入完成）后自动添加第二个-，提升输入体验
3. 分阶段验证：
   • 日：先限制1-31的基础范围，若已输入月份，则根据年月计算该月最大天数，自动修正为合法日期（比如2月最多28/29天）
   • 月：限制1-12，自动去除无意义的0开头（如05转为5），避免00这类无效值
   • 年：强制为4位数字，范围锁定在0001-9999，超出范围或长度自动截断
4. 长度控制：通过maxlength属性和代码双重限制总输入长度不超过10位

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