如何在结合FullCalendar的Bootstrap表单中添加时段验证？

你之前写的eventClick逻辑仅在点击日历上已存在的事件时才会触发，但你的自定义按钮是直接打开空白表单，完全不会走这个验证流程，所以验证规则根本没生效。

验证逻辑必须放在表单页面（haircut-shift.html）的提交环节，因为用户是在这个弹窗里选择日期和时段，要在提交前直接检查输入内容。

1. 表单页面基础结构（示例） #

假设你的haircut-shift.html里有如下Bootstrap表单：

<form id="haircutForm">
  <div class="mb-3">
    <label for="clientName" class="form-label">姓名</label>
    <input type="text" class="form-control" id="clientName" required>
  </div>
  <div class="mb-3">
    <label for="shiftDatetime" class="form-label">预约日期时段</label>
    <input type="datetime-local" class="form-control" id="shiftDatetime" required>
    <div id="datetimeFeedback" class="invalid-feedback"></div>
  </div>
  <button type="submit" class="btn btn-primary">提交预约</button>
</form>

2. 添加表单提交验证逻辑 #

在haircut-shift.html的<script>标签里添加如下代码，拦截表单提交并做规则校验：

document.getElementById('haircutForm').addEventListener('submit', function(e) {
  // 阻止默认提交行为
  e.preventDefault();

  const datetimeInput = document.getElementById('shiftDatetime');
  const selectedTime = new Date(datetimeInput.value);

  // 验证星期范围：周二（2）到周六（6）
  const day = selectedTime.getDay();
  if (day < 2 || day > 6) {
    alert("理发时段仅开放周二至周六");
    return;
  }

  // 验证小时范围：10:00 至 19:00（若需排除19:00整，可把>=改成>）
  const hour = selectedTime.getHours();
  if (hour < 10 || hour >= 19) {
    alert("理发时段仅开放10:00至19:00");
    return;
  }

  // 验证通过，执行提交逻辑（比如AJAX发送到后端）
  // 提交成功后关闭弹窗
  window.close();
});

3. 可选优化：实时验证（用户选择时就提示） #

给日期输入框添加change事件，在用户选择后立刻校验并给出反馈，提升体验：

document.getElementById('shiftDatetime').addEventListener('change', function() {
  const selectedTime = new Date(this.value);
  const day = selectedTime.getDay();
  const hour = selectedTime.getHours();
  const feedbackEl = document.getElementById('datetimeFeedback');

  let errorMsg = '';
  if (day < 2 || day > 6) {
    errorMsg = "仅周二至周六可预约";
  } else if (hour < 10 || hour >= 19) {
    errorMsg = "仅10:00-19:00可预约";
  }

  // 用Bootstrap的表单样式展示错误
  if (errorMsg) {
    this.classList.add('is-invalid');
    feedbackEl.textContent = errorMsg;
  } else {
    this.classList.remove('is-invalid');
    feedbackEl.textContent = '';
  }
});

内容的提问来源于stack exchange，提问作者Mariano