time输入框的required属性无效，因其value默认为空字符串但浏览器自动补全为当前时间；pattern属性对type="time"无效；需用javascript监听事件并基于valueasdate判null校验；移动端兼容性差，建议降级为text+自定义库。
time 输入框的 required 属性为什么没效果？
因为 <input type="time"> 在用户未输入时，其 value 并非空字符串，而是空字符串（""），但浏览器会自动补全为当前时间（如 "12:00"）或保留 placeholder 行为，导致 required 校验常被绕过。
实操建议：
- 必须配合 JavaScript 手动检查
value是否为空 —— 注意：不能只用!input.value，要严格判断是否为"" - 不要依赖
placeholder暗示必填，它不触发任何验证逻辑 - 服务端仍需二次校验，前端验证可被绕过
如何用 pattern 属性校验 time 格式？
pattern 对 type="time" 无效 —— 浏览器会忽略它。HTML5 规范明确禁止对 time、date 等原生类型使用 pattern，否则控制台报错 The specified value does not conform to the required format，但不会阻止提交。
替代方案：
- 改用
type="text"+ 自定义正则（如^([01]?[0-9]|2[0-3]):[0-5][0-9]$），但失去原生时间选择器体验 - 保留
type="time"，用 JS 监听input或change事件，手动解析valueAsDate - 注意：
valueAsDate在非法值（如空、"25:00"）下返回null，这是最可靠的格式校验依据
用户选了时间但提交时变成空怎么办？
常见于表单重置、Vue/React 等框架中未正确绑定 v-model 或 value prop，或在 JS 中误将 input.value = null（应设为 ""）。
关键点：
-
<input type="time">的合法初始值只能是""或符合HH:MM格式的字符串（如"09:30"） - 设
value为undefined、null或非法格式（如"9:30"缺前导零），浏览器会清空显示并使value变成"" - 使用
valueAsDate读取时，若返回null，说明输入无效 —— 这比字符串匹配更可靠
移动端 time 输入框兼容性要注意什么？
iOS Safari 16.4+ 才支持 step 属性（如 step="300" 表示 5 分钟粒度），旧版 iOS 会忽略；部分安卓 WebView（如微信内置）可能渲染为文本框而非时间选择器。
应对策略：
- 避免依赖
step做业务约束，它仅影响 UI 步进，不参与验证 - 检测
input.type === "time"是否生效：创建临时 input 元素，赋值type="time"后检查input.type返回值是否仍为"time" - 降级方案：用
type="text"+ 第三方时间选择库（如 flatpickr），但需额外处理键盘类型（inputmode="numeric"不适用，应设inputmode="text"配合自定义软键盘提示）
真正难的不是写验证逻辑，而是意识到：time 输入框的「值」和「用户感知」之间存在三层脱节 —— 浏览器自动补零、框架数据绑定时机、移动端原生控件不可控。每次绕开它，都得在 JS 里多守一道关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
