加 required 属性即可设为必填，但仅提交时触发原生验证，且不校验日期有效性（如2024-02-30会被自动修正）；需配合 form 提交或 checkValidity() 使用，并注意旧版 Safari 兼容性及手动清空导致的验证绕过问题。
HTML <input type="date"> 怎么设为必填？
加 required 属性就行，但要注意它只在表单提交时触发原生验证，且不校验日期是否“有效”（比如 2024-02-30 会被浏览器自动修正为 2024-03-01，然后通过验证）。
常见错误是以为加了 required 就能拦住空值和非法日期——其实空值能拦住，但格式错、超范围、闰年错误这类，浏览器大多静默修正而非报错。
-
<input type="date" required>是最简写法，提交时若未选值会弹提示（文案由浏览器决定） - 必须配合
<form></form>提交行为才生效；单独用 JS 调checkValidity()也行，但不会自动弹 UI - 某些旧版 Safari（iOS 15.4 之前）对
required+type="date"支持不稳定，建议加 JS 回退校验
为什么选了日期却仍被判定为空？
典型原因是用户没真正“选择”，而是手动清空了输入框（尤其在 Chrome/Firefox 中点叉号），此时 value 变成空字符串，required 才起作用；但如果用户选了日期又改回空白再提交，部分浏览器可能保留上次的 value，导致验证绕过。
更可靠的做法是监听 change 和 input 事件，主动检查 input.value 是否为空或无效：
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
const dateInput = document.querySelector('input[type="date"]');
dateInput.addEventListener('change', () => {
if (!dateInput.value) {
dateInput.setCustomValidity('请选择有效日期');
} else {
dateInput.setCustomValidity('');
}
});
-
change事件在失去焦点或确认选择后触发，适合最终校验 -
input事件在每次输入/清空时都触发，但对 date 类型意义不大（用户无法键盘输入） - 务必调用
setCustomValidity('')清除错误，否则后续提交永远失败
怎么限制可选日期范围？min 和 max 的坑
min 和 max 必须是 YYYY-MM-DD 格式字符串，且值需早于/晚于当前系统时间（否则无效）。它们影响的是 UI 上可点选的日期，但不阻止用户手动输入或 JS 修改 value。
- 设置
min="2024-01-01"后，用户仍可通过 DevTools 或 JS 改input.value = "2023-12-31"绕过 - 提交前必须用 JS 再次校验：
new Date(input.value) - 注意时区：
input.value始终按本地时区解析为 UTC 零点，min/max字符串也按本地时区比较，一般没问题；但跨时区部署时建议统一用 UTC 时间处理
服务端为什么还要校验日期？
因为所有前端限制（required、min、max、JS 校验）都可被禁用或绕过。用户可能关 JS、用 curl 提交、或篡改 DOM。
服务端至少要检查三件事：
- 字段是否存在且非空（
POST数据里没有该 key，或值为""） - 是否符合
YYYY-MM-DD格式（正则或日期解析器） - 是否在业务允许范围内（如“入职日期不能晚于今天”需用服务器当前时间判断，而非客户端传的时间）
日期类表单真正的难点不在前端怎么写，而在于前后端对“有效日期”的定义是否一致，以及是否漏掉了时区、闰年、2月29日等边界情况。
