javascript - 通过年龄验证来验证 dob

Question

我正在努力做到这一点，以便如果有人尝试填写表格，他们的年龄必须在 15 至 80 岁之间，但我不确定如何使用我的出生日期来验证年龄在 15 至 80 岁之间80. 我将如何做到这一点以及如何确保输入生日的用户年龄在 15 岁到 80 岁之间？

"use strict";
/*get variables from form and check rules*/
function validate() {
  var errMsg = ""; /* stores the error message */
  var result = true; /* assumes no errors */
  var age = document.getElementById("age").value;
  var state = document.getElementById("state").value;
  var postcode = document.getElementById("postcode").value;

  //get varibles from form and check rules here
  // if something is wrong set result = false, and concatenate error message
  if (age <= 15) {
    errMsg = errMsg + "You must be 15 or older to fill out this form\n"
    result = false;
  } else(age >= 80) {
    errMsg = errMsg + "You must be 80 or younger to fill out this form\n"
    result = false;
  }


  if (errMsg != "") { //only display message box if there is something to show
    alert(errMsg);
  }
  return result; //if false the information will not be sent to the server
}


function init() {

  var regForm = document.getElementById("regform"); // get ref to the HTML element

  regForm.onsubmit = validate; //register the event listener 
}

window.onload = init;

<article>
  <header>
    <h1>The Virtual World</h1>
    <nav>
      <p class="menu"><a href="index.html#home">Home</a></p>
      <p class="menu"><a href="jobs.html#jobs">Jobs</a></p>
      <p class="menu"><a href="apply.html#apply">Apply</a></p>
      <p class="menu"><a href="about.html#about">About</a></p>
      <p class="menu"><a href="enhancements.html#enhancements">Enhancements</a></p>
    </nav>
  </header>
  <section id="required">
    <h5>All fields with * are required</h5>
  </section>
  <form id="regForm" method="post" action="http://mercury.swin.edu.au/it000000/formtest.php">
    <fieldset>
      <legend>Job Application</legend>
      <p><label for="JobID">*Job ID:</label>
        <input type="text" name="JobID" id="JobID" maxlength="5" size="10" pattern="^[a-zA-Z]{2}[0-9]{3}$" required="required" /></p>
      <section id="choose">
        <h5>Please choose from QM593 or CS197</h5>
      </section>
      <fieldset>
        <legend>Personal Details</legend>
        <p><label for="title">*Title:</label>
          <select name="title" id="title" required="required">
            <option value="">Please Select</option>         
            <option value="title">Dr</option>
            <option value="title">Mr</option>
            <option value="title">Miss</option>
            <option value="title">Mrs</option>
            <option value="title">Ms</option>
        	</select></p>

        <p><label for="firstName">*First Name:</label>
          <input type="text" name="firstName" id="firstName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" />

          <label for="familyName">*Family Name:</label>
          <input type="text" name="familyName" id="familyName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" required="required" /></p>

        <p><label for="midName">Middle Name:</label>
          <input type="text" name="midName" id="midName" maxlength="20" size="20" pattern="^[a-zA-Z ]+$" /></p>

        <p><label for="dob">*Date of Birth:</label>
          <input type="text" name="dob" id="dob" placeholder="dd/mm/yyyy" pattern="\d{1,2}/\d{1,2}/\d{4}" maxlength="10" size="10" required="required" /></p>

        <p>*Gender:
          <label for="male">Male</label>
          <input type="radio" id="male" name="sex" value="male" required="required" />
          <label for="female">Female</label>
          <input type="radio" id="female" name="sex" value="female" required="required" /></p>

        <p><label for="street">*Street Address:</label>
          <input type="text" name="street" id="street" maxlength="40" size="30" required="required" /></p>

        <p><label for="suburb">*Suburb/town:</label>
          <input type="text" name="suburb" id="suburb" maxlength="40" size="20" required="required" /></p>

        <p><label for="state">*State:</label>
          <select name="state" id="state" required="required">
            <option value="">Please Select</option>         
            <option value="state">VIC</option>
            <option value="state">NSW</option>
            <option value="state">QLD</option>
            <option value="state">NT</option>
            <option value="state">WA</option>
            <option value="state">SA</option>
            <option value="state">TAS</option>
            <option value="state">ACT</option>
        	</select></p>

        <p><label for="postcode">*Postcode:</label>
          <input type="text" name="postcode" id="postcode" minlength="4" maxlength="4" size="10" pattern="^[0-9]{4}$" required="required" /></p>

        <p><label for="email">*Email:</label>
          <input type="email" name="email" id="email" size="30" required="required" /></p>

        <p><label for="number">*Phone number:</label>
          <input type="tel" name="number" id="number" minlength="8" maxlength="12" size="10" required="required" /></p>

        <p>Skill list:</p>
        <p><label for="C/C+">C/C+</label>
          <input type="checkbox" id="C/C+" name="category[]" checked="checked" /></p>
        <p><label for="XML">XML</label>
          <input type="checkbox" id="XML" name="category[]" /></p>
        <p><label for="Java">Java</label>
          <input type="checkbox" id="Java" name="category[]" /></p>
        <p><label for="Python">Python</label>
          <input type="checkbox" id="Python" name="category[]" /></p>
        <p><label for="SQL">SQL</label>
          <input type="checkbox" id="SQL" name="category[]" /></p>
        <p><label for="PERL">PERL</label>
          <input type="checkbox" id="PERL" name="category[]" /></p>
        <p><label for="MySQL">MySQL</label>
          <input type="checkbox" id="MySQL" name="category[]" /></p>
        <p><label for="Windows">Windows</label>
          <input type="checkbox" id="Windows" name="category[]" /></p>
        <p><label for="UNIX">UNIX</label>
          <input type="checkbox" id="UNIX" name="category[]" /></p>
        <p><label for="Linux">Linux</label>
          <input type="checkbox" id="Linux" name="category[]" /></p>
        <p><label for="other">Other Skills:</label> </p>
        <p>
          <textarea id="other" name="other" rows="8" cols="70" placeholder="Please write any other skills you may have here..."></textarea>
        </p>
      </fieldset>
    </fieldset>
    <input type="submit" value="Apply" />
    <input type="reset" value="Reset Application" />
  </form>
</article>

Answer 1

既然您知道日期将用“/”分隔，只需按照旧方式将字符串拆分为 3 并创建日期对象即可。

var dob = document.getElementById("dob").value.split("/");

var date = new Date(dob[2], parseInt(dob[1]) - 1, dob[0]);

然后您可以进行处理，例如检查日、月、年以验证它们是否在 15 到 80 之间。

如果您没有考虑数月和数天的时间，那么这个简单的 if 语句就可以达到目的。

var today = new Date();
var age = today.getFullYear() - date.getFullYear();

if(age >= 15 && age <= 80){
    // Between age ranges.
}