JavaScript中如何校验时间是否跨天及限制合法时间范围？

嘿，我来帮你搞定这个时间编辑的需求！针对你提出的「固定日期下仅允许修改起止时间、限制合法时分值、禁止跨天」的要求，我整理了一套清晰的实现方案，分模块拆解给你：

你的核心需求很明确：startDate和endDate始终固定为同一天，仅能修改startTime和endTime，需要做到杜绝非法时分输入+禁止结束时间早于开始时间/跨天。下面分步骤实现：

一、限制起止时间为合法的时分值 #

这里推荐两种方案，根据你的交互场景选：

方式1：下拉选择框（最省心，从根源避免错误） #

直接用<select>组件提供预设的合法小时（00-23）和分钟（00-59）选项，用户只能选合法值，不需要额外校验：

<!-- 开始时间选择区 -->
<div>
  开始时间：
  <select id="startHour">
    <script>
      // 生成00-23的小时选项，默认选中17
      for(let i=0; i<24; i++) {
        const hour = i.toString().padStart(2, '0');
        document.write(`<option value="${hour}" ${hour === '17' ? 'selected' : ''}>${hour}</option>`);
      }
    </script>
  </select>
  :
  <select id="startMinute">
    <script>
      // 生成00-59的分钟选项，默认选中30
      for(let i=0; i<60; i++) {
        const minute = i.toString().padStart(2, '0');
        document.write(`<option value="${minute}" ${minute === '30' ? 'selected' : ''}>${minute}</option>`);
      }
    </script>
  </select>
</div>

<!-- 结束时间选择区 -->
<div>
  结束时间：
  <select id="endHour">
    <script>
      // 生成00-23的小时选项，默认选中18
      for(let i=0; i<24; i++) {
        const hour = i.toString().padStart(2, '0');
        document.write(`<option value="${hour}" ${hour === '18' ? 'selected' : ''}>${hour}</option>`);
      }
    </script>
  </select>
  :
  <select id="endMinute">
    <script>
      // 生成00-59的分钟选项，默认选中00
      for(let i=0; i<60; i++) {
        const minute = i.toString().padStart(2, '0');
        document.write(`<option value="${minute}" ${minute === '00' ? 'selected' : ''}>${minute}</option>`);
      }
    </script>
  </select>
</div>

方式2：输入框+正则校验（适合必须用输入框的场景） #

如果只能用文本输入框，用正则限制输入格式为HH:mm，同时校验时分合法性：

// 校验单个时间字符串是否为合法的HH:mm格式
function isValidTime(timeStr) {
  const timeRegex = /^([01]\d|2[0-3]):([0-5]\d)$/;
  return timeRegex.test(timeStr);
}

// 给开始时间输入框绑定失焦校验
document.getElementById('startTimeInput').addEventListener('blur', function(e) {
  if(!isValidTime(e.target.value)) {
    alert('请输入合法时间，格式如17:30');
    e.target.value = '17:30'; // 重置为默认值
  }
});

// 给结束时间输入框绑定失焦校验，同时触发跨天检查
document.getElementById('endTimeInput').addEventListener('blur', function(e) {
  if(!isValidTime(e.target.value)) {
    alert('请输入合法时间，格式如18:00');
    e.target.value = '18:00';
  } else {
    checkCrossDay();
  }
});

二、禁止跨天的校验逻辑 #

因为日期固定为同一天，核心要保证结束时间不早于开始时间（合法时分已经限制了结束时间最大为23:59，不需要额外校验跨天边界）。我们可以写一个校验函数，在结束时间变化时触发：

// 把时间字符串转成分钟数，方便数值比较
function timeToMinutes(timeStr) {
  const [hour, minute] = timeStr.split(':').map(Number);
  return hour * 60 + minute;
}

// 检查结束时间是否早于开始时间（即非法跨天/时间顺序颠倒）
function checkCrossDay() {
  // 从下拉框拼接起止时间字符串（如果是输入框直接取value即可）
  const startTime = `${document.getElementById('startHour').value}:${document.getElementById('startMinute').value}`;
  const endTime = `${document.getElementById('endHour').value}:${document.getElementById('endMinute').value}`;

  const startTotalMinutes = timeToMinutes(startTime);
  const endTotalMinutes = timeToMinutes(endTime);

  if(endTotalMinutes < startTotalMinutes) {
    alert('结束时间不能早于开始时间，不允许跨天！');
    // 重置结束时间为开始时间，也可以改成重置为23:59，根据需求调整
    document.getElementById('endHour').value = document.getElementById('startHour').value;
    document.getElementById('endMinute').value = document.getElementById('startMinute').value;
  }
}

// 给结束时间的下拉框绑定change事件，实时校验
document.getElementById('endHour').addEventListener('change', checkCrossDay);
document.getElementById('endMinute').addEventListener('change', checkCrossDay);

三、完整可运行代码（结合下拉框方案） #

把上面的逻辑整合起来，直接就能用：

<!DOCTYPE html>
<html>
<head>
  <title>时间编辑校验Demo</title>
</head>
<body>
  <div>
    开始时间：
    <select id="startHour">
      <script>
        for(let i=0; i<24; i++) {
          const hour = i.toString().padStart(2, '0');
          document.write(`<option value="${hour}" ${hour === '17' ? 'selected' : ''}>${hour}</option>`);
        }
      </script>
    </select>
    :
    <select id="startMinute">
      <script>
        for(let i=0; i<60; i++) {
          const minute = i.toString().padStart(2, '0');
          document.write(`<option value="${minute}" ${minute === '30' ? 'selected' : ''}>${minute}</option>`);
        }
      </script>
    </select>
  </div>

  <div>
    结束时间：
    <select id="endHour">
      <script>
        for(let i=0; i<24; i++) {
          const hour = i.toString().padStart(2, '0');
          document.write(`<option value="${hour}" ${hour === '18' ? 'selected' : ''}>${hour}</option>`);
        }
      </script>
    </select>
    :
    <select id="endMinute">
      <script>
        for(let i=0; i<60; i++) {
          const minute = i.toString().padStart(2, '0');
          document.write(`<option value="${minute}" ${minute === '00' ? 'selected' : ''}>${minute}</option>`);
        }
      </script>
    </select>
  </div>

  <button onclick="getFinalTimes()">确认时间</button>

  <script>
    function timeToMinutes(timeStr) {
      const [hour, minute] = timeStr.split(':').map(Number);
      return hour * 60 + minute;
    }

    function checkCrossDay() {
      const startTime = `${document.getElementById('startHour').value}:${document.getElementById('startMinute').value}`;
      const endTime = `${document.getElementById('endHour').value}:${document.getElementById('endMinute').value}`;

      const startTotal = timeToMinutes(startTime);
      const endTotal = timeToMinutes(endTime);

      if(endTotal < startTotal) {
        alert('结束时间不能早于开始时间，不允许跨天！');
        document.getElementById('endHour').value = document.getElementById('startHour').value;
        document.getElementById('endMinute').value = document.getElementById('startMinute').value;
      }
    }

    // 绑定校验事件
    document.getElementById('endHour').addEventListener('change', checkCrossDay);
    document.getElementById('endMinute').addEventListener('change', checkCrossDay);

    // 获取最终时间值
    function getFinalTimes() {
      const startDate = '2018-05-31';
      const endDate = '2018-05-31';
      const startTime = `${document.getElementById('startHour').value}:${document.getElementById('startMinute').value}`;
      const endTime = `${document.getElementById('endHour').value}:${document.getElementById('endMinute').value}`;

      console.log(`开始时间：${startDate} ${startTime}`);
      console.log(`结束时间：${endDate} ${endTime}`);
      alert(`最终时间：\n开始：${startDate} ${startTime}\n结束：${endDate} ${endTime}`);
    }
  </script>
</body>
</html>

额外优化小建议 #

• 如果用Vue/React等框架，可以把时间值绑定到状态中，用watch监听变化来触发校验，代码会更简洁。
• 可以做联动优化：选择开始时间后，结束时间的小时默认从开始时间的小时开始，减少用户误操作的概率。

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