max属性在绝大多数浏览器中对<input type="time">有效但有严格格式要求，必须为HH:MM或HH:MM:SS（24小时制、两位补零），否则被忽略；它仅在blur或提交时校验，不阻止手动输入或脚本赋值，服务端必须二次验证。
HTML <input type="time"> 的 max 属性是否有效？
直接说结论：max 属性在绝大多数浏览器中对 <input type="time"> 是**有效但有严格格式要求**的，但它只约束用户选择范围，不阻止手动输入或脚本赋值。
常见错误是传入非法格式（比如带日期、毫秒、时区），导致浏览器直接忽略该属性——此时表单看似没限制，其实是失效了。
-
max值必须是HH:MM或HH:MM:SS格式（24 小时制，两位数补零） - 不能含日期部分（如
"2024-01-01T18:00"）、不能含毫秒或时区（如"18:00:00.000Z"） - 若
value超出max，Chrome / Firefox 会清空输入框或显示无效状态，Safari 表现更宽松
如何正确设置并验证 max 值？
写法必须干净利落。例如限制最晚 19:30：
<input type="time" max="19:30">
如果后端返回的是 ISO 时间字符串（如 "2024-05-20T19:30:00"），得先提取时间部分：
立即学习“前端免费学习笔记（深入）”；
- 用
new Date().toTimeString().slice(0,5)不可靠（受本地时区影响） - 推荐正则：
"2024-05-20T19:30:00".match(/T(\d{2}:\d{2})/)[1]→"19:30" - 或用
toISOString()配合substring：new Date().toISOString().substring(11,16)（仅当需当前时间上限时）
为什么设置了 max 还能输进超限时间？
因为原生 <input type="time"> **不拦截键盘输入**，只校验 onBlur 或 form submit 时的值。用户手动敲 "20:00" 即使 max="19:30" 也不会实时阻止。
- 解决办法：监听
input事件，用 JS 截断或重置 - 示例逻辑：
if (e.target.value > "19:30") e.target.value = "19:30"（注意字符串比较在 HH:MM 下成立） - 更健壮的做法是转为分钟数比较：
const toMinutes = t => (t.split(":")[0] * 60) + (+t.split(":")[1])
移动端兼容性与替代方案
iOS Safari 对 max 支持较弱，部分版本完全忽略；Android Chrome 基本正常。若业务强依赖时间上限，别只靠 HTML 属性。
- 服务端必须二次校验，前端不能信任任何客户端限制
- 考虑用
<input type="datetime-local">（支持完整日期+时间的max），但 UI 和语义可能不符需求 - 如需精准控制，用轻量级 JS 时间选择器（如 flatpickr）并配置
maxTime选项，它会在 UI 层禁用超限选项
真正容易被忽略的是：即使 max 显示生效，用户仍可通过 DevTools 修改 DOM 或绕过 JS 直接提交——所有时间边界逻辑最终都得落在服务端验证上。
