表单输入的 Javascript 日期验证

Question

我正在尝试验证表单上的日期，以便用户无法选择过去的日期，或者结帐日期大于 checkin 日期

<form action="form2email.php" method="post" name="form" target="_blank" onSubmit="return validate(form);">
    <fieldset id="user-1">
        <h2>
      <img src="images/booking-enquiry.png" width="160" height="20" />
    </h2>
        <label for="name">Name:</label>
        <input name="name" type="text" />
        <label for="email" class="required">Email:</label>
        <input type="text" name="email" size="8" id="email" />
    </fieldset>

    <fieldset id="user-2">
        <h2>&nbsp;</h2>
        <label for="Phone" class="required">Phone:</label>
        <input type="text" name="Telephone_Number" id="Phone" />
        <label for="Accommodation Type" class="required">Accommodation Type:</label>
        <select id="room_type" name="Accommodation Type">
            <option value="Villa">Villa</option>
            <option value="1 Bed Apartment">1 Bed Apartment</option>
            <option value="2 Bed Apartment">2 Bed Apartment</option>

        </select>
    </fieldset>

    <fieldset id="user-3">
        <h2>&nbsp;</h2>
        <label for="Check-in-Date" class="required">Check-in Date:</label>
        <script>
            DateInput('checkindate', true, 'DD-MON-YYYY')
        </script>

        <label for="Check-out-Date" class="required">Check-out Date:</label>
        <script>
            DateInput('checkoutdate', true, 'DD-MON-YYYY')
        </script>

        <label>
            <div style="padding-top:10px;font-size:14px;color:white;">
                <p>Total Charges: <span id="tot_charges">1995.00</span> THB
                </p>
                <p class="VAT"><span> Prices exclude VAT @ 7%</span>
                </p>
            </div>
        </label>

    </fieldset>
    <fieldset id="user-4">
        <h2>&nbsp;</h2>
        <label for="Comments" class="required">Comments :</label>
        <textarea name="Comments"></textarea>

        <div>
            <label style="padding:0;"><a href="cancellation.html" onclick="window.open('cancellation.html','popup','width=800,height=400,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">Please read our cancellation policy </a>
            </label>
            <input type="checkbox" name="checkbox" id="checkbox" value="I agree to cancellation policy">
            <label for="checkbox" id="agree" name="agree">I agree to cancellation policy</label>
        </div>
        <input type="submit" value="Submit" />
    </fieldset>
</form>


<SCRIPT LANGUAGE="JavaScript">
    function validate() {
        var frm = document.forms["form"];
        if (frm.checkbox.checked == false) {
            alert("Please Agree To Our Cancellation Policy.");
            return false;
        } else return true;

    }
</SCRIPT>


<script type="text/javascript">
    var frmvalidator = new Validator("form");
    frmvalidator.addValidation("Email", "maxlen=100");
    frmvalidator.addValidation("Email", "req");
    frmvalidator.addValidation("Email", "email");
    frmvalidator.addValidation("Phone", "req");
    frmvalidator.addValidation("Phone", "maxlen=100");
    frmvalidator.addValidation("Phone", "numeric");
    frmvalidator.setAddnlValidationFunction(validate);
</script>

试图将这样的东西集成到:

function validateTheDate() {
  var dateOK = false;
  var Today = new Date();

  if (Response_Requested_By_Object.picked.date < Today) 
    alert('Cannot select a date in the past.');
  else if (Response_Requested_By_Object.picked.yearValue > 2020) 
    alert('Cannot select dates beyond 2020.');
  else 
    dateOK = true;

  return dateOK;
}

但不太确定如何使用现有验证来做到这一点？!？

Answer 1

validateDate 函数应如下所示:

function validateDate(){
  var dateOK  = false;
  var today   = new Date();
  var startDt = new Date(document.getElementById("checkin").value).getTime();
  var endDt   = new Date(document.getElementById("checkout").value).getTime();

  if (startDt < today || endDt < today)
    alert('Cannot select a date in the past.');
  else if (startDt > 2020 || endDt > 2020) 
    alert('Cannot select dates beyond 2020.');
  else if(startDt > endDt){
    alert ('Checkout date is greater than Checkin date.');
    dateOK = true;
  }
}

要将此自定义函数添加到您的验证器中，只需:

frmvalidator.setAddnlValidationFunction(validateDate);

注意:我确信有很多(Javascript)Jquery 插件非常适合验证表单和日期(使用警报并不酷)。