时间输入框value必须为本地时区iso 8601格式；需用tolocaletimestring生成“09:00”类字符串，提交前转当日date对象校验是否在15分钟内，后端须结合timezoneoffset还原utc或明确标注本地时区。
时间输入框的 value 值必须是本地时区的 ISO 8601 格式
HTML <input type="time"> 默认只采集时分秒，不包含日期和时区信息，提交后容易在不同设备上解析出错。比如用户在北京选 "09:00"，后端收到的可能是 UTC 的 09:00（即北京时间 17:00），导致签到时间偏移。
解决办法是：前端获取用户本地时间后，用 toISOString() 截取时分秒部分并补上本地时区偏移，或者更稳妥地——直接用 new Date().toLocaleTimeString("sv-SE", {hour12: false}) 生成符合 <input type="time"> 要求的格式（如 "09:00"），但注意该值始终代表“今日”的这个时间点。
- 不要直接把
new Date().toJSON()赋给value，它带日期和 Z 后缀，浏览器会拒绝解析 - 页面加载时可自动设为当前时间：
document.getElementById("checkin-time").value = new Date().toTimeString().slice(0,5) - 如果需精确到秒，确保
step属性设为"1"：<input type="time" step="1">
提交前必须校验是否早于当前时间（防手动篡改）
用户可以随意修改 <input type="time"> 的值，包括填入过去或未来的任意时间。签到逻辑要求“不能签未来，也不能签太久以前”，所以仅靠前端限制远远不够，但前端校验能立刻反馈问题。
关键点在于：比较必须基于同一基准。浏览器的 input.value 是字符串（如 "08:45"），需转成当日的 Date 对象再比对：
const timeStr = document.getElementById("checkin-time").value;
if (!timeStr) return;
const [h, m] = timeStr.split(":").map(Number);
const now = new Date();
const inputTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), h, m);
if (inputTime > new Date()) {
alert("签到时间不能晚于当前时刻");
return;
}
if (inputTime
- 别用字符串字典序比较（
"09:00" 看似可行，但 <code>"09:00" 就错了） - 服务端仍需做二次校验，因为前端时间可被绕过
- 若页面长期不刷新，
now可能滞后，建议提交前重新获取new Date()
后端接收时要明确时区上下文
前端传来的只是 "09:30" 这样的纯时间字符串，后端无法知道这是用户本地时间、服务器时间，还是某个固定时区时间。常见错误是直接拼接当天日期存入数据库，结果在跨夏令时或跨日界线时出错。
- 推荐做法：前端同时传
timezoneOffset（new Date().getTimezoneOffset()，单位为分钟），后端据此还原为 UTC 时间存储 - 或强制约定所有签到时间按用户所在时区解释，并在数据库字段加注释说明（如
checkin_time_local TEXT） - 避免用
datetime-local替代，它同样不含时区，且兼容性更差（Safari 一直不支持）
移动端软键盘弹出后用户可能误触其他输入框
在 iOS 和部分安卓机型上，<input type="time"> 会触发原生时间选择器，但焦点切换或快速操作时容易意外关闭面板，或跳转到下一个 input。尤其表单里有多个时间输入项时，体验割裂。
- 用
autofocus和required强制聚焦首个时间框，减少误触概率 - 签到按钮添加
onclick="this.blur();"，防止点击按钮时软键盘还开着干扰操作 - 不要给时间输入框加
inputmode="numeric"，它会触发数字键盘而非时间选择器
实际签到功能的复杂点不在控件本身，而在于时间语义的传递一致性——从用户看到的“早上九点”，到数据库存的“2024-04-05T01:00:00Z”，中间每一步都得有人明确说了算。否则修 bug 时翻日志，只会看到一堆对不上号的“09:00”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
