HTML input type=date输入无效值时无法获取值，求解决方案

我之前也碰到过原生date输入框的这个坑，确实挺头疼的——它自带的自动修正机制会把不合法的输入要么改成近似的合法日期，要么直接清空值，导致你用val()或者后端PHP都拿不到用户实际输入的内容。给你几个实用的解决思路：

方法1：改用文本输入框自定义校验逻辑 #

放弃原生type="date"，换成type="text"，这样你可以完全掌控用户的输入内容，再自己实现格式校验和日期合法性检查。比如：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="test_date" placeholder="请输入MM/DD/YYYY格式的日期">
<button onclick="getValue()">Get value</button>
<p>Entered: <span id="entered"></span></p>

function isValidDate(dateStr) {
  // 先校验格式是否为MM/DD/YYYY
  const regex = /^\d{2}\/\d{2}\/\d{4}$/;
  if (!regex.test(dateStr)) return false;
  // 再判断是否为合法日期
  const parts = dateStr.split('/');
  const date = new Date(parts[2], parts[0]-1, parts[1]);
  return date && date.getMonth() === parseInt(parts[0])-1 && date.getDate() === parseInt(parts[1]);
}

function getValue() {
  const inputVal = $('input[name=test_date]').val();
  $('#entered').text(inputVal);
  // 可选：同时做有效性提示
  if (!isValidDate(inputVal)) {
    alert('输入的日期格式无效或不是合法日期');
  }
}

这种方法的好处是完全可控，不管用户输入什么都能拿到原始值；缺点是需要自己处理日期选择的友好性（比如可以搭配第三方日期选择器插件来提升体验）。

方法2：实时监听输入事件保存原始值 #

如果一定要保留type="date"的样式和部分原生功能，可以通过监听输入相关事件，把用户的原始输入实时保存起来，避免被浏览器的自动修正覆盖：

let originalInput = '';
const $dateInput = $('input[name=test_date]');

// 监听输入事件，保存原始值
$dateInput.on('input keydown', function(e) {
  // 处理输入的单个字符
  if (e.type === 'keydown' && e.key.length === 1) {
    originalInput += e.key;
  } else if (e.type === 'input') {
    // 兼容部分浏览器输入时的val更新逻辑
    originalInput = $(this).val() || originalInput;
  }
});

function getValue() {
  // 优先使用保存的原始输入，没有的话再用当前val
  const displayVal = originalInput || $dateInput.val();
  $('#entered').text(displayVal);
}

注意：这种方法可能存在浏览器兼容性问题，不同浏览器对date输入框的事件触发逻辑略有不同，需要多场景测试。

方法3：利用invalid事件捕获无效状态 #

当用户输入无效日期时，date输入框会触发invalid事件，你可以在这个事件里处理无效输入的情况，结合之前保存的原始值来获取用户输入：

let originalInput = '';
const $dateInput = $('input[name=test_date]');

$dateInput.on('input', function() {
  originalInput = $(this).val() || originalInput;
}).on('invalid', function(e) {
  e.preventDefault(); // 阻止浏览器默认的无效提示弹窗
  alert(`你输入的日期「${originalInput}」是无效的，请重新输入`);
});

function getValue() {
  $('#entered').text(originalInput);
}

不过要注意，有些浏览器在输入无效日期后会直接把value设为空，所以还是需要提前保存原始输入才能拿到内容。

总的来说，如果你的核心需求是必须获取用户的原始输入内容，最可靠的方案还是方法1——改用文本输入框自定义校验。原生date输入框的设计初衷就是只返回符合格式的合法日期值，本身并不支持获取无效的原始输入。

内容的提问来源于stack exchange，提问作者Bàn Chân Trần