pattern属性仅对type="text"、"tel"、"search"等字符串型输入有效，对number/date无效；正则需省略^$锚点和斜杠；必须配title提示格式要求；服务端须用解析器双重校验。
pattern属性只对特定type生效，别乱用number或date
HTML 的 pattern 属性**不会在 type="number" 或 type="date" 上起作用**——浏览器会先把输入转成数字或 Date 对象，正则根本收不到原始字符串。你写 ，校验永远不触发。
真正能用 pattern 校验时间的，只有这几种 type：
-
type="text"（最通用，但需手动控制键盘类型） -
type="tel"（iOS/Android 会唤起数字键盘，且保留字符串） -
type="search"（语义略偏，但可用）
推荐组合：，既保格式又兼顾移动端体验。
HH:mm:ss 正则必须带锚点，且不能写/^$/
浏览器自动给 pattern 值加上 ^(?:...)$，所以你只需写核心部分，**千万别加 ^ 和 $ 外层锚点，更不能写斜杠**。
✅ 正确写法：pattern="([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]"
❌ 错误写法：pattern="/^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/"（斜杠被当文字匹配）
❌ 错误写法：pattern="^([01][0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$"（旧版 Safari 可能跳过整条规则）
这个正则能拦住 24:00:00、12:60:00、09:15:99，但注意：它不校验“是否存在该时间”（比如 2023-02-30 类问题在时间里不存在），只管格式合法。
必须配title，否则用户完全不知道错在哪
title 是唯一能在错误气泡、hover 提示、input.validationMessage 中复用的文案。没设 title，Chrome 默认报“请与所要求的格式匹配”，用户一脸懵。
✅ 推荐写法：title="请输入24小时制时间，如：14:30:25，时分秒都必须是两位数"
⚠️ 注意：iOS Safari 对 title 支持弱，若强提示必要，得用 JS 补充 setCustomValidity()。
另外，pattern 仅在表单提交时触发，不实时。如需输入中即时反馈，必须监听 input 或 blur 事件，用 JS 手动 test。
服务端绝不信任前端pattern，必须双重校验
前端 pattern 只是用户体验优化，攻击者删掉 HTML 就能绕过。服务端收到时间字符串后，必须独立验证：
- 先用正则快速过滤明显非法格式（如非数字、缺冒号、超长）
- 再用语言原生解析器确认是否真实可转为时间对象（如 JS 的
new Date("14:30:25")不报错但结果是无效日期，应改用timeString.match(...)+moment().isValid()或Intl.DateTimeFormat） - Python 同理：用
datetime.strptime(time_str, "%H:%M:%S")捕获ValueError，而非只靠正则
最容易被忽略的是：正则只能拦住语法错误，但像 "25:00:00" 这种在某些解析器里会被静默截断或进位，必须靠解析器本身的失败信号来判定——不是 !isNaN(new Date(x)) 就算数，而是看 parse 是否抛异常或返回 null。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
