JavaScript实现Safari浏览器日期输入框非法日期（如2月31日）验证

Chrome、Firefox 等浏览器可直接通过输入框的 validity.badInput 属性识别用户输入的不存在日期（如31/02/2000、31/09/2000），但 Safari 对该属性支持存在缺陷：用户输入非法日期时，输入框的 value 属性会直接返回空字符串，也不会正确标记 badInput 状态。针对非必填日期字段的场景，可通过以下方案实现全浏览器兼容校验，避免把用户未输入的合法空值误判为非法。

核心思路 #

• 优先使用标准 validity.badInput 属性，覆盖支持良好的浏览器
• 增加用户输入标记，区分「用户未输入的合法空值」和「输入非法导致的空值」，适配非必填场景
• 增加日期回校逻辑兜底：利用 JS 原生 Date 对象自动进位的特性，解析日期后反向比对年/月/日是否和输入完全一致，识别所有不存在的非法日期。

可直接复用的实现代码 #

// 找到目标日期输入框
const dateInput = document.querySelector('input[type="date"]');
// 标记用户是否产生过输入行为，用于区分空值场景
let hasUserInput = false;

// 监听输入事件
dateInput.addEventListener('input', () => {
  hasUserInput = true;
  const valid = isDateInputValid(dateInput);
  // 按需自定义错误提示逻辑
  dateInput.setCustomValidity(valid ? '' : '请输入存在的有效日期');
});

/**
 * 校验日期输入合法性，全浏览器兼容
 * @param {HTMLInputElement} input 原生date类型输入框
 * @returns {boolean} 日期合法/允许为空时返回true，非法日期返回false
 */
function isDateInputValid(input) {
  // 非必填场景：用户从未输入，空值属于合法状态
  if (!hasUserInput && input.value === '') return true;

  // 标准属性判断：优先适配Chrome/Firefox等支持badInput的浏览器
  if (input.validity.badInput) return false;

  // Safari特殊场景判断：用户有输入但value为空、valueAsDate为空，即为非法日期
  if (hasUserInput && input.value === '' && input.valueAsDate === null) return false;

  // 通用兜底回校逻辑，覆盖所有边界场景
  if (input.value) {
    // 原生date输入框合法value固定为YYYY-MM-DD格式，直接拆分即可
    const [inputYear, inputMonth, inputDay] = input.value.split('-').map(Number);
    // 月份从0开始计数，所以要减1
    const parsed = new Date(inputYear, inputMonth - 1, inputDay);
    // 非法日期会被Date自动进位（比如2月31日会变成3月2日/3日），比对不一致即为非法
    const dateMatched = parsed.getFullYear() === inputYear &&
                        parsed.getMonth() === inputMonth - 1 &&
                        parsed.getDate() === inputDay;
    if (!dateMatched) return false;
  }

  return true;
}

关键说明 #

• 回校逻辑是全浏览器通用的核心判断：JS 原生 Date 收到超出当月范围的日期参数时不会报错，会自动向后进位（例如new Date(2000, 1, 31)会被解析为2000年3月2日），只要比对解析后的日期和原输入的年、月、日完全一致，就能100%识别所有不存在的日期，包括非闰年的2月29日、小月的31日这类场景。
• 如果业务使用文本输入框自定义日期格式（非原生type="date"输入框），可以跳过前两个判断分支，只要把用户输入的年、月、日解析为数字后，直接走最后一步回校逻辑即可，不需要额外做复杂的大小月、闰年判断。
• 非必填场景不要删除hasUserInput标记逻辑，否则会把用户从未操作过的空输入误判为非法日期。

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