js校验开始时间和结束时间

JS校验开始时间和结束时间需要以下步骤：

1. HTML结构：首先，我们需要在HTML代码中定义开始时间和结束时间的输入框，HTML的代码如下：

<label for="date-start">开始时间：</label>
<input type="date" id="date-start" name="start">
<label for="date-end">结束时间：</label>
<input type="date" id="date-end" name="end">
<button id="submit-btn">提交</button>

1. 获取输入值：使用JavaScript代码，获取输入框中的开始时间和结束时间的值，我们可以用getElementById方法获取对应的DOM元素，代码如下：

const startDateInput = document.getElementById('date-start');
const endDateInput = document.getElementById('date-end');

const startDate = startDateInput.value;
const endDate = endDateInput.value;

1. 校验输入值：接下来，我们需要判断输入值是否合法。我们可以根据输入的日期字符串创建日期对象，并判断这个日期是否为NaN，如果是NaN，说明输入的日期格式不正确，需要进行相应的提示。代码如下：

const startDateObj = new Date(startDate);
const endDateObj = new Date(endDate);

if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
    alert('日期格式不正确，请输入正确的日期格式！');
    return;
}

1. 校验开始时间和结束时间的关系：接下来，我们需要进行开始时间和结束时间的比较，如果开始时间大于结束时间，则提示用户输入错误，并清空输入框。代码如下：

if (startDateObj > endDateObj) {
    alert('开始时间不能大于结束时间！');
    startDateInput.value = '';
    endDateInput.value = '';
    return;
}

1. 提交表单：最后一步，我们需要在确认开始时间和结束时间都合法之后，才能提交表单。代码如下：

const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', () => {
  if (isNaN(startDateObj.getTime()) || isNaN(endDateObj.getTime())) {
      alert('日期格式不正确，请输入正确的日期格式！');
      return;
  }
  if (startDateObj > endDateObj) {
      alert('开始时间不能大于结束时间！');
      startDateInput.value = '';
      endDateInput.value = '';
      return;
  }
  // 在这里写提交表单的代码
});

示例1：校验日期格式

假设用户输入了01012021作为开始时间，02282022作为结束时间，这两个日期都是不合法的。因为它们的格式不符合“YYYY-MM-DD”的规范，我们使用JS对它进行校验后会弹出提示框，告诉用户日期格式不正确。

示例2：校验开始时间和结束时间的关系

假设开始时间为2022年2月20日，结束时间为2022年2月15日，这里需要JS进行校验，如果出现开始时间大于结束时间的情况时，需要向用户提供错误信息，并将输入框清空，让用户重新输入。如果时间范围有效，则可以继续执行其他表单操作，例如发送AJAX请求等。