如何限制出生日期输入年龄为15-80岁，修复外部JavaScript不生效问题

现有代码存在的问题 #

• 年龄阈值不符合需求：当前代码maxYear = yyyy - 18限制最小年龄为18岁，你需要的最小年龄是15岁，此处参数错误
• 加载事件绑定方式存在冲突：使用window.onload = function(){}的赋值方式，会覆盖项目中其他地方绑定的同名加载事件，这是你写inline时其他JS失效的核心原因
• 变量未声明引发全局污染：minYear、maxYear未使用let/const声明，会自动变为全局变量，极易和其他JS代码的全局变量冲突，引发报错导致逻辑中断
• 加载时机选择不合理：window.onload需要等页面所有资源（图片、样式等）加载完成才触发，如果你外部JS引入位置靠后，还可能出现事件绑定前页面已经加载完成，导致逻辑不执行的问题

修复后的代码 #

外部JS文件代码 #

// 改用DOMContentLoaded事件，DOM解析完成就触发，不会等资源加载，也不会覆盖其他监听
document.addEventListener('DOMContentLoaded', function() {
  const date = new Date();
  let dd = date.getDate();
  let mm = date.getMonth() + 1;
  const yyyy = date.getFullYear();

  // 日期月份补0
  if (dd < 10) dd = "0" + dd;
  if (mm < 10) mm = "0" + mm;

  const minYear = yyyy - 80; // 最大年龄80岁，对应最早可选择的出生日期
  const maxYear = yyyy - 15; // 最小年龄15岁，对应最晚可选择的出生日期

  const min = `${minYear}-${mm}-${dd}`;
  const max = `${maxYear}-${mm}-${dd}`;

  const birthInput = document.getElementById("start");
  if (birthInput) { // 加一层判断，避免元素不存在时报错影响其他逻辑
    birthInput.setAttribute("min", min);
    birthInput.setAttribute("max", max);
  }
});

HTML代码（无inline JS） #

<form>
  <label for="start">Date of birth:</label>
  <input type="date" id="start" required="required" name="trip-start" value="2021-10-02" />
  <input type="submit" />
</form>
<!-- 外部JS建议放在body结束标签前引入，或者放在head中加defer属性 -->
<script src="你的外部JS文件路径"></script>

可选优化建议 #

前端input的min、max属性可以被用户手动修改HTML绕过，建议在表单提交时额外加一层JS校验，同时后端也要做对应年龄校验，避免非法数据提交。

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