在前端表单开发中，时间范围输入是高频需求，比如预约时段、统计周期等场景都需要用户输入规范的时间范围。如果仅靠后端校验，会带来无效请求浪费资源，而HTML5的pattern属性可以帮我们在前端完成基础的格式校验，减少不必要的后端交互。
什么是HTML5 pattern属性
pattern是HTML5为<input>标签新增的属性，它的值是一个正则表达式，浏览器会自动用这个正则去匹配用户输入的内容，如果匹配失败，表单提交会被拦截，同时可以配合title属性给用户展示格式提示。
它的基本使用结构如下：
<input type="text" pattern="正则表达式" title="格式提示信息">
时间范围格式的正则编写思路
我们先明确要验证的时间范围格式，这里以最常见的HH:MM-HH:MM格式为例，也就是24小时制的时间，起始时间和结束时间用短横线分隔，比如09:30-18:00。
拆解需求的话，正则需要满足几个条件：
- 起始时间是00:00到23:59的合法时间
- 中间是短横线分隔符
- 结束时间同样是00:00到23:59的合法时间
对应的正则可以写成：^([01][0-9]|2[0-3]):[0-5][0-9]-([01][0-9]|2[0-3]):[0-5][0-9]$，我们拆解下这个正则的含义：
| 正则片段 | 含义说明 |
|---|---|
| ^ | 匹配字符串开头 |
| ([01][0-9]|2[0-3]) | 匹配小时部分，0-19或者20-23，覆盖24小时制所有合法小时 |
| :[0-5][0-9] | 匹配冒号加分钟部分，00-59的合法分钟 |
| - | 匹配分隔短横线 |
| $ | 匹配字符串结尾 |
完整示例实现
下面是一个完整的时间范围输入验证示例，包含格式提示和提交拦截逻辑：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间范围验证示例</title>
<style>
.form-group {
margin: 20px 0;
}
input:invalid {
border-color: #ff4444;
}
input:valid {
border-color: #44ff44;
}
</style>
</head>
<body>
<form id="timeForm">
<div class="form-group">
<label for="timeRange">请输入时间范围（格式：HH:MM-HH:MM，例如09:30-18:00）：</label>
<input
type="text"
id="timeRange"
name="timeRange"
pattern="^([01][0-9]|2[0-3]):[0-5][0-9]-([01][0-9]|2[0-3]):[0-5][0-9]$"
title="请输入正确的时间范围格式，如09:30-18:00，时间采用24小时制"
required
>
</div>
<button type="submit">提交</button>
</form>
<script>
// 可选：添加自定义验证提示
document.getElementById('timeForm').addEventListener('submit', function(e) {
const input = document.getElementById('timeRange');
if (!input.checkValidity()) {
alert(input.title);
e.preventDefault();
}
});
</script>
</body>
</html>注意事项
使用pattern属性验证时间范围时，有几个细节需要注意：
- pattern属性仅做格式匹配，不会校验时间逻辑，比如输入23:00-08:00这种跨天的时间，正则会判定为合法，如果需要校验逻辑，还需要额外加JavaScript逻辑。
- 部分旧版浏览器可能不支持pattern属性，如果需要兼容旧浏览器，可以补充JavaScript的正则验证逻辑作为兜底。
- title属性的提示信息要尽量清晰，告诉用户正确的输入格式，提升用户体验。
- 如果时间范围格式有变化，比如用~分隔时间，只需要把正则里的短横线换成~即可，其他部分不需要修改。
正则表达式的编写需要结合实际需求调整，比如如果需要支持12小时制加AM/PM的格式，只需要修改对应的正则片段即可，pattern属性的使用逻辑是一致的。
HTML5pattern_属性表单验证时间范围验证输入格式校验修改时间：2026-05-27 00:21:45