如何在HTML中校验时间输入格式-html教程-PHP中文网

现代浏览器对input type="time"有原生校验，仅接受hh:mm或hh:mm:ss（24小时制），拒绝"25:00""abc"等非法格式；value始终返回标准字符串，不支持12小时制；ie中退化为text；需服务端二次校验。

如何在html中校验时间输入格式

用 `input type="time"` 让浏览器自动校验基础格式

现代浏览器对 input type="time" 有原生校验能力，能拒绝非标准时间（如 "25:00"、"12:60"、"abc"），但仅限于 HH:MM（24小时制）或带秒的 HH:MM:SS，不支持 12 小时制（"1:30 PM"）或任意分隔符（"12-30"）。

关键点：

value 始终以 HH:MM 或 HH:MM:SS 格式返回，即使用户输入了带前导零的 "09:05"，JS 读取时仍是字符串 "09:05"
不触发 pattern 属性（浏览器忽略它），所以不能靠正则增强校验
移动端会调起系统时间选择器，体验好但格式不可定制
IE 不支持，type="time" 在 IE 中退化为普通文本框，无任何校验

手动校验时别只 check `value.length`

很多人写 if (input.value.length !== 5) 判断 "HH:MM"，这会漏掉合法但长度不同的情况：比如用户粘贴了 "9:5"（浏览器可能自动补成 "09:05"，也可能不补），或输入了带秒的 "14:30:45"（长度为 8）。

更稳妥的做法是用正则匹配并提取时间组件：

const timeRegex = /^([0-1]?[0-9]|2[0-3]):([0-5][0-9])(?::([0-5][0-9]))?$/;
const match = input.value.match(timeRegex);
if (!match) {
  // 格式错误
} else {
  const [_, hour, minute, second] = match;
  const h = parseInt(hour, 10);
  const m = parseInt(minute, 10);
  const s = second ? parseInt(second, 10) : 0;
  // 此时 h/m/s 是数字，可进一步做业务逻辑判断（如禁止早于 8:00）
}

注意：^ 和 $ 必须加上，否则 "25:00x" 这类也会部分匹配成功。

`change` 和 `blur` 事件哪个更适合触发校验？

用 blur 更合理。因为 change 在用户修改后失去焦点才触发（和 blur 类似），但若用户用键盘快速输入（如连按 12:30），change 只在最终确认时触发一次；而 input 事件太频繁，容易干扰用户体验。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

推荐组合：

实时提示可用 input 事件 + 节流（如 300ms 延迟），仅做格式高亮（如红框/绿勾）
最终校验和提交拦截必须用 blur 或表单 submit 时检查，确保值已稳定
提交前再跑一遍正则+语义校验（例如“结束时间不能早于开始时间”），因为用户可能绕过 UI 直接改 DOM

服务端永远要重新校验，不能信前端 `validity.valid`

input.checkValidity() 和 input.validity.valid 看起来可靠，但它们只反映浏览器当前对 type="time" 的理解——而这个理解在不同浏览器、不同版本间有差异。比如 Safari 曾长期不校验秒数部分，Chrome 对 "24:00" 的处理也经历过变更。

更重要的是：任何前端校验都可被禁用或绕过。如果你的后端接收 start_time 字段，就必须自己解析字符串、验证范围、转成标准时间对象（如 new Date() 或库如 dayjs），再判断是否合法。

典型疏漏点：