基于Apps Script的礼服租赁应用添加防重叠预订表单验证

我使用Apps Script开发了一款礼服租赁Web应用，现需添加表单验证功能以防止重复预订或预订时间重叠：当同一种租赁类型的新预订取件日期至归还日期区间与已有预订的时间区间存在重叠时，需阻止该预订提交。

后端验证函数（Apps Script） #

function checkBookingOverlap(rentalType, pickUpDate, returnDate) {
  var dataSheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Booking Data");
  var dataRange = dataSheet.getRange(2, 5, dataSheet.getLastRow() - 1, 3); // 假设租赁类型在E列，取件日期在F列，归还日期在G列
  var dataValues = dataRange.getValues();
  for (var i = 0; i < dataValues.length; i++) {
    var existingRentalType = dataValues[i][0];
    var existingPickUpDate = new Date(dataValues[i][1]);
    var existingReturnDate = new Date(dataValues[i][2]);
    if (existingRentalType === rentalType &&
        ((pickUpDate >= existingPickUpDate && pickUpDate < existingReturnDate) ||
        (returnDate > existingPickUpDate && returnDate <= existingReturnDate) ||
        (pickUpDate <= existingPickUpDate && returnDate >= existingReturnDate))) {
      return true; // 检测到时间重叠，不允许预订
    }
  }
  return false; // 未发现重叠，允许预订
}

前端预订表单 #

<form class="row" id="bookingForm" onsubmit="handleFormSubmit(this)">
    
    <div class="col-md-6 form-group">
      <label for="rentalType" class="form-label">租赁类型</label>
      <select class="form-select" id="rentalType" name="rentalType" required>
        <option value="">选择租赁类型</option>
        <option value="Gown">礼服</option>
        <option value="Suit">西装</option>
        <option value="Coat">外套</option>
      </select>
    </div>
    <div class="col-md-6 form-group">
      <label for="pickUpDate" class="form-label">取件日期</label>
      <input type="date" class="form-control" id="pickUpDate" name="pickUpDate" required>
    </div>
    <div class="col-md-6 form-group">
      <label for="returnDate" class="form-label">归还日期</label>
      <input type="date" class="form-control" id="returnDate" name="returnDate" required>
    </div>
    <div class="col-md-6 form-group">
  <label for="proofOfPayment" class="form-label">付款凭证</label>
  <input type="file" class="form-control" id="proofOfPayment" name="proofOfPayment" required>
</div>
<div class="col-md-6 form-group">
  <label for="idProof" class="form-label">身份证明</label>
  <input type="file" class="form-control" id="idProof" name="idProof" required>
</div>
    <div class="col-12 text-center mt-3">
    <button type="submit" class="btn btn-primary">提交预订</button>
    </div>
  </form>

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