如何使type="date"及文本类型输入框仅允许18岁以上出生日期输入

嘿，我来帮你搞定这两个年龄验证的需求！不管是原生date类型的输入框还是指定的文本输入框，都有靠谱的实现方案，下面分开来说：

原生date输入框可以利用它的max属性来限制可选日期范围，同时配合JavaScript做动态计算和二次验证（防止用户手动修改DOM属性绕过限制）。

代码实现 #

<!-- HTML部分 -->
<form>
  <label for="dobDate">出生日期：</label>
  <input type="date" id="dobDate" name="dobDate" max="">
  <button type="submit">提交</button>
</form>

// JavaScript部分
// 计算并设置18年前的日期作为可选最大值
function setMaxAdultDate() {
  const today = new Date();
  const eighteenYearsAgo = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());
  // 转换为date输入框支持的YYYY-MM-DD格式
  const formattedDate = eighteenYearsAgo.toISOString().split('T')[0];
  document.getElementById('dobDate').max = formattedDate;
}

// 页面加载时初始化max值
window.addEventListener('load', setMaxAdultDate);

// 表单提交时二次验证，确保万无一失
document.querySelector('form').addEventListener('submit', function(e) {
  const selectedDate = new Date(document.getElementById('dobDate').value);
  const eighteenYearsAgo = new Date(new Date().getFullYear() - 18, new Date().getMonth(), new Date().getDate());
  
  if (selectedDate > eighteenYearsAgo) {
    e.preventDefault();
    alert('请输入年满18周岁的出生日期！');
  }
});

说明 #

• 页面加载时自动计算当前日期往前推18年的日期，设置为max属性，这样日历控件只会显示该日期及之前的选项。
• 表单提交时再做一次验证，避免用户通过浏览器调试工具修改max属性绕过限制。

文本输入框需要先做格式校验（比如强制YYYY-MM-DD格式），再计算年龄判断是否满18岁，同时可以做输入时的格式引导。

代码实现 #

<!-- HTML部分，用你提供的输入框 -->
<form>
  <label for="txtDOB">出生日期：</label>
  <input id="txtDOB" type="text" name="txtDOB" placeholder="请输入YYYY-MM-DD格式">
  <button type="submit">提交</button>
</form>

// JavaScript部分
const dobTextInput = document.getElementById('txtDOB');

// 输入时自动格式化，只允许数字和横杠，强制YYYY-MM-DD结构
dobTextInput.addEventListener('input', function() {
  this.value = this.value.replace(/[^0-9-]/g, '')
                          .replace(/(\d{4})(?=\d)/, '$1-')
                          .replace(/(\d{2})(?=\d)/, '$1-')
                          .slice(0, 10);
});

// 失去焦点时验证年龄
dobTextInput.addEventListener('blur', validateAge);

// 表单提交时再次验证
document.querySelector('form').addEventListener('submit', function(e) {
  if (!validateAge()) {
    e.preventDefault();
    alert('请输入符合要求的年满18周岁的出生日期！');
  }
});

// 核心验证函数
function validateAge() {
  const dobValue = dobTextInput.value;
  // 先验证格式是否正确
  const datePattern = /^\d{4}-\d{2}-\d{2}$/;
  if (!datePattern.test(dobValue)) {
    alert('请输入正确的YYYY-MM-DD格式日期！');
    return false;
  }

  const dobDate = new Date(dobValue);
  const today = new Date();
  // 计算准确年龄：考虑生日是否已过
  let age = today.getFullYear() - dobDate.getFullYear();
  const monthDifference = today.getMonth() - dobDate.getMonth();
  const dayDifference = today.getDate() - dobDate.getDate();

  // 如果本月还没到生日，或者到了本月但今天还没到生日，年龄减1
  if (monthDifference < 0 || (monthDifference === 0 && dayDifference < 0)) {
    age--;
  }

  if (age < 18) {
    alert('您必须年满18周岁才能提交！');
    return false;
  }

  return true;
}

说明 #

• 输入时的格式化处理可以引导用户输入正确的日期格式，避免无效输入。
• 年龄计算逻辑考虑了“生日未到”的情况，比如今天是2024年5月10日，用户生日是2006年5月15日，此时实际年龄是17岁，会被拦截。
• 同样，前端验证只是辅助，一定要在后端再做一次相同的验证，防止恶意用户绕过前端限制。

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