HTML5 input[type="date"]自带基础格式校验，自动拒绝非法日期（如2023-13-01），触发invalid事件，无需JS，但仅限格式与基本有效性，不包含业务逻辑，且Safari旧版本支持有限。
HTML5 input[type="date"] 本身会做基础格式校验
浏览器原生支持的 input[type="date"] 在用户手动输入或通过日期选择器提交时，会自动拒绝非法格式（如 "2023-13-01"、"2023-02-30"、"2023/01/01"），并触发 invalid 事件。这层校验无需 JS 就能生效，但仅限于格式和基本有效性（如月份范围、闰年判断），不涉及业务逻辑（如“不能选今天之前”）。
注意：该校验依赖浏览器实现，Safari 旧版本（
用 setCustomValidity() 覆盖或补充校验逻辑
当需要添加业务规则（例如禁止选择过去日期、限制在某区间内），必须用 JS 主动干预。关键点是：调用 setCustomValidity() 后，需在验证通过时传入空字符串 ""，否则后续所有提交都会被阻断。
- 先检查
input.valueAsNumber（毫秒时间戳）或new Date(input.value)是否有效，避免NaN导致误判 - 对比时间时务必用
Date对象，别直接比较字符串（"2023-01-01" 在字典序下成立，但不可靠） - 示例：禁止选择今天之前的日期
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('change', function() {
const selected = new Date(this.value);
const today = new Date();
today.setHours(0, 0, 0, 0); // 清除时分秒，避免跨日误判
if (selected < today) {
this.setCustomValidity('日期不能早于今天');
} else {
this.setCustomValidity(''); // 必须清空，否则持续报错
}
});
服务端必须重复校验，不能信任前端
HTML5 的日期校验纯属客户端行为，用户可轻易禁用 JS、绕过表单、或用 curl/postman 直接发请求。后端收到的 date 字段仍可能是任意字符串（如 "abc"、"9999-99-99"）。
立即学习“前端免费学习笔记（深入）”；
- Node.js（Express）中建议用
new Date(value)判断是否为有效日期，并检查!isNaN(date.getTime()) && date.toString() !== "Invalid Date" - Python（Django/Flask）推荐用
datetime.strptime(value, "%Y-%m-%d")，捕获ValueError - Java（Spring）可用
@DateTimeFormat(pattern = "yyyy-MM-dd")配合@Valid，但需额外处理空字符串或 null
兼容性差的场景下，别硬扛 input[type="date"]
如果项目需支持 IE、老版 Android WebView 或微信内置浏览器（部分版本不渲染日期选择器，只显示文本框），强行使用 input[type="date"] 会导致体验断裂：用户看不到日历，又无法输入合法格式（因为没提示、无占位符、无格式引导）。
此时更稳妥的做法是：
- 降级为
input[type="text"]+ 第三方日期组件（如 flatpickr、vanilla-picker） - 用
pattern属性辅助提示（pattern="\d{4}-\d{2}-\d{2}"），但注意它只对type="text"有效，且不校验日期真实性 - 在移动端，优先检测
Modernizr.inputtypes.date或尝试创建元素判断input.type === "date"是否被识别
日期看似简单，但跨浏览器、跨设备、前后端协同的坑特别隐蔽——比如 Safari 允许用户输入 "2023-01" 并通过校验，但 valueAsDate 返回 null；又比如某些安卓键盘会默认插入斜杠而非短横线。这些细节不实测很容易漏掉。
