HTML <input type="time"> 仅做前端格式校验，无法阻止非法时间提交，服务端必须二次验证HH:MM格式及范围（0≤HH≤23, 0≤MM≤59），并处理空值、空格、BOM等异常输入。
HTML <input type="time"> 本身不阻止非法时间提交
浏览器原生的 <input type="time"> 会校验格式（如 25:00 或 12:65 会被标为无效），但仅靠 required 和 step 无法真正阻止用户绕过校验提交——比如手动修改 DOM、禁用 JS 后提交，或通过 POST 工具发请求。服务端永远要二次校验，前端校验只是用户体验层。
用 checkValidity() + reportValidity() 拦截表单提交
在 submit 事件中主动触发校验，失败时调用 preventDefault() 阻止提交：
<form id="timeForm">
<input type="time" id="meetingTime" required>
<button type="submit">提交</button>
</form>
<script>
document.getElementById('timeForm').addEventListener('submit', e => {
const input = document.getElementById('meetingTime');
if (!input.checkValidity()) {
input.reportValidity(); // 显示浏览器默认提示（如“请输入有效时间”）
e.preventDefault();
}
});
</script>
-
checkValidity()返回布尔值，不触发 UI 提示 -
reportValidity()会显示原生错误气泡，且只对已标记为 invalid 的字段生效 - 注意：若用户清空输入框，
required会使其 invalid；但若填了24:00，部分浏览器（如 Chrome）会自动转成00:00并视为 valid —— 这是规范行为，不是 bug
自定义校验逻辑：比如禁止 00:00 或限制时间段
原生校验只管格式和 min/max，业务规则（如“会议时间不能是午夜”“只能选整点”）必须手写判断：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
const input = document.getElementById('meetingTime');
const timeValue = input.value; // 格式为 "HH:MM"
if (timeValue === '00:00') {
input.setCustomValidity('会议时间不能设为 00:00');
} else if (parseInt(timeValue.split(':')[0]) % 2 !== 0) {
input.setCustomValidity('仅允许偶数小时（如 08:00、10:00）');
} else {
input.setCustomValidity(''); // 清除自定义错误
}
// 然后在 submit 里仍需调用 checkValidity()
-
setCustomValidity()设为空字符串才表示“通过”，设非空字符串即触发 invalid - 务必在每次校验前重置，否则旧错误会残留
-
min和max属性只支持完整 ISO 时间字符串（如min="09:00"），不支持相对时间或动态计算
服务端必须重新解析并验证 HH:MM 字符串
前端一切校验都可被绕过。Node.js/Python/PHP 等后端收到 meetingTime=25:00 时，不能直接 parse 成 Date 或存库：
立即学习“前端免费学习笔记（深入）”；
- 拆解
HH和MM，转为整数后分别判断：0 ≤ HH ≤ 23且0 ≤ MM ≤ 59 - 注意时区无关性：
type="time"不含时区，服务端按本地业务时区解释（如全部按 UTC+8 处理） - 别依赖
new Date(value)解析，它可能静默修正（24:00 → 00:00 next day）或抛异常，不可控
最易忽略的一点：用户可能提交空字符串、空格、或带 BOM 的 UTF-8 字节 —— 所有这些都要在服务端 trim + 正则匹配 ^([01]?[0-9]|2[0-3]):[0-5][0-9]$ 再进入业务逻辑。
