本文详解如何通过比较相邻时间槽的起止时间来准确判断用户选择的时间段是否真正连续，解决仅依赖序号排序导致的验证失效问题。
本文详解如何通过比较相邻时间槽的起止时间来准确判断用户选择的时间段是否真正连续，解决仅依赖序号排序导致的验证失效问题。
在 Web 预约系统中，要求用户必须选择至少两个连续的时间槽（如 09:00–10:00 和 10:00–11:00），是一个常见但易出错的业务逻辑。您当前的 JavaScript 验证函数 validateSlots() 存在一个关键缺陷：它基于 <input value="N"> 的数字序号（如 1, 2, 3）进行排序和差值判断，而该序号仅代表 HTML 渲染顺序（受 {% for slot in time_slots reversed %} 影响），并不反映真实的时间先后关系。
例如，当后端按日期倒序渲染时间槽（如 16:00–17:00 → 15:00–16:00 → 14:00–15:00），其 value 可能为 3, 2, 1。此时若用户勾选了视觉上连续的 15:00–16:00 和 14:00–15:00，其 value 数组为 [2, 1]，降序排序后为 [2, 1]，差值为 1 —— 表面通过，但逻辑错误：“连续”应指时间无缝衔接，而非序号相邻。
✅ 正确方案是：提取每个时间槽的真实 start_time 和 end_time，转换为可比较的时间对象，再按起始时间升序排序，逐项验证前一个的 end_time 是否严格等于后一个的 start_time。
以下是重构后的健壮验证函数：
<script>
function validateSlots() {
// 获取所有已勾选的复选框
const checkboxes = document.querySelectorAll('input[name="selected_slots"]:checked');
// 提取并解析每个选中项对应的时间信息
// 注意：需从 DOM 中获取实际显示的时间文本（或更优：通过 data-* 属性预埋结构化数据）
const selectedTimeslots = Array.from(checkboxes).map(checkbox => {
// 推荐做法：在模板中为每个 checkbox 添加 data 属性（修改 Django 模板）
// <input type="checkbox" name="selected_slots" value="{{ slot.serial_number }}"
// data-start="{{ slot.slot.start_time }}" data-end="{{ slot.slot.end_time }}">
const start = checkbox.dataset.start;
const end = checkbox.dataset.end;
if (!start || !end) {
throw new Error("Missing time data attributes. Please ensure template includes data-start/data-end.");
}
return { start, end };
});
// 检查最少数量
if (selectedTimeslots.length < 2) {
alert("Please select at least 2 time slots.");
return false;
}
// 将时间字符串转为 Date 对象（使用固定日期避免时区干扰）
const parseTime = (timeStr) => new Date(`1970-01-01T${timeStr}:00`);
try {
const parsed = selectedTimeslots.map(slot => ({
start: parseTime(slot.start),
end: parseTime(slot.end)
}));
// 按起始时间升序排序（确保逻辑顺序）
parsed.sort((a, b) => a.start - b.start);
// 验证连续性：前一项的 end 必须等于后一项的 start（毫秒级精确相等）
for (let i = 0; i < parsed.length - 1; i++) {
if (parsed[i].end.getTime() !== parsed[i + 1].start.getTime()) {
alert("Selected time slots must be consecutive (no gaps or overlaps).");
console.warn("Non-consecutive gap detected:",
`${parsed[i].end.toTimeString().slice(0,5)} ≠ ${parsed[i+1].start.toTimeString().slice(0,5)}`);
return false;
}
}
} catch (e) {
console.error("Time parsing error:", e);
alert("Invalid time format detected. Please contact support.");
return false;
}
return true;
}
</script>
? 关键改进与注意事项：
-
模板增强（必需）：在 Django 模板中为每个 checkbox 添加
data-start和data-end属性，确保时间数据与 DOM 元素强绑定：{% if slot.slot.status == 'available' %} <input type="checkbox" name="selected_slots" value="{{ slot.serial_number }}" data-start="{{ slot.slot.start_time }}" data-end="{{ slot.slot.end_time }}"> {% endif %} -
时间解析可靠性：使用
1970-01-01T前缀规避本地时区影响，.getTime()确保毫秒级精确比对。 -
错误防御：增加
try/catch处理非法时间格式，并提供清晰的用户提示。 - 语义化验证：不再依赖易变的序号，而是基于业务本质——时间流的无缝衔接。
? 进阶建议：
若需支持“允许间隔 X 分钟”的弹性规则（如允许 15 分钟缓冲），可将 !== 改为 > (parsed[i + 1].start.getTime() - bufferMs)；若需检测重叠（如用户误选 09:00–10:30 和 10:00–11:00），可在循环中加入 parsed[i].start 判断。
通过此方案，无论用户按正序、倒序还是跳跃勾选，只要时间上真正首尾相接，验证即通过——这才是连续性校验的正确打开方式。
