如何限制出生日期输入框仅允许提交时年龄处于15至80岁区间

可以通过HTML原生属性限制+JS动态校验两层逻辑实现需求，具体操作如下：

1 前端可选范围限制（原生HTML+JS） #

直接通过<input type="date">自带的min和max属性限制用户可选择的日期范围，需要动态计算两个边界值：

• 最大可选日期：当前日期往前推15年，对应刚好满15周岁的最晚出生日期，晚于该日期的用户不满15周岁
• 最小可选日期：当前日期往前推80年，对应刚好满80周岁的最早出生日期，早于该日期的用户超过80周岁

完整代码示例：

<label for="start">Date of birth:</label>
<input type="date" id="start" required="required" name="trip-start">

<script>
// 计算边界日期
const today = new Date();
const maxDate = new Date(today.getFullYear() - 15, today.getMonth(), today.getDate());
const minDate = new Date(today.getFullYear() - 80, today.getMonth(), today.getDate());

// 日期转为YYYY-MM-DD格式赋值给input
const formatDate = (date) => date.toISOString().split('T')[0];
const birthInput = document.getElementById('start');
birthInput.min = formatDate(minDate);
birthInput.max = formatDate(maxDate);
// 可选：设置默认值为刚好满15周岁的日期
birthInput.value = formatDate(maxDate);
</script>

该方案的优势是用户在系统自带的日期选择器中，直接无法选择超出范围的日期，交互体验更好。

2 表单提交兜底校验 #

前端限制可以被用户手动篡改代码绕过，所以必须在表单提交时增加JS校验，同时后端接口也要做相同的年龄校验，避免非法数据提交：

// 表单提交校验逻辑示例
document.querySelector('form').addEventListener('submit', (e) => {
  const birthDate = new Date(document.getElementById('start').value);
  const today = new Date();
  // 精准计算周岁
  let age = today.getFullYear() - birthDate.getFullYear();
  const monthDiff = today.getMonth() - birthDate.getMonth();
  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
    age--;
  }
  // 校验不通过阻止提交
  if (age < 15 || age > 80) {
    e.preventDefault();
    alert('请选择年龄在15到80周岁之间的出生日期');
  }
});

注意事项 #

所有前端限制都仅用于优化用户体验，不能作为安全校验逻辑，后端必须增加相同的年龄校验规则，避免非法数据入库。

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