input type="time" 的 pattern 无效，因浏览器会自动将输入转为标准时间格式并丢弃原始字符串，正则无机会运行；需改用 type="text" 配合 JavaScript 校验或后端严格验证。
pattern 属性不能校验时间格式——它只对 text、search、tel、url、email、password 这六种 type 生效，而 time 类型会被浏览器直接解析为时间对象，原始字符串进不来，正则根本没机会运行。
为什么 input type="time" 的 pattern 无效
浏览器在用户输入后，会立即将值转为 HH:MM（或带秒的 HH:MM:SS）格式，并丢弃原始输入。这意味着：
-
<input type="time" pattern="^([01]?[0-9]|2[0-3]):[0-5][0-9]$">：pattern 完全被忽略，无论输什么（比如99:99或abc），浏览器都自动修正或截断，不触发校验 - 即使加了
required，也只校验是否为空，不校验格式逻辑 - iOS Safari 下还可能强制补零、删前导空格，进一步破坏你预设的匹配意图
真正能用正则校验时间的替代方案
想用正则控制时间输入，必须放弃 type="time"，改用字符串型输入，并手动约束格式：
-
<input type="text" inputmode="numeric" pattern="[0-2][0-9]:[0-5][0-9]" title="请输入24小时制时间，如 09:30 或 23:59">：用text+inputmode="numeric"唤起数字键盘，保留原始字符串供正则匹配 - 若需支持秒：
pattern="[0-2][0-9]:[0-5][0-9]:[0-5][0-9]"，但注意这仍无法排除24:00:00或25:99:99等非法组合 - 更稳妥的做法是去掉
pattern，改用 JavaScript 监听blur或input事件，用/^([01]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/.test(value)校验，并调用setCustomValidity()
JavaScript 校验时间时容易漏掉的关键点
光靠正则只能做“格式过滤”，真实时间有效性必须靠 Date 或手动逻辑兜底：
立即学习“前端免费学习笔记（深入）”；
- 正则
/^[0-2][0-9]:[0-5][0-9]$/会放行24:00、25:30—— 它只管字符，不管语义 - 不要用
new Date("2000-01-01T" + timeStr)后仅判!isNaN()：因为new Date("2000-01-01T25:30")不报错，而是静默转成第二天的某个时间 - 正确做法是拆解字符串：
const [h, m] = timeStr.split(':'); if (h 23 || m 59) { /* 无效 */ } - 如果还要支持秒，记得检查第三段是否存在、是否为数字、是否在 0–59 范围内
最常被跳过的一步：前端正则或 JS 校验只是体验层，后端收到时间字符串后，必须重新用语言原生的时间解析函数（如 Python 的 datetime.strptime()、Node.js 的 dayjs().isValid()）做完整验证——浏览器里绕过 pattern 的方式太多，不能信。
