Question

我试图这样做，如果有人试图填写表格，他们必须在15至80岁之间，但我不知道如何使用我的出生日期来验证年龄在15到50之间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.
}

Answer 2

您可以从dob计算年龄，并在完成相同的验证后完成。

dob = document.getElementById("dob").value;
dob = new Date(dob);
var today = new Date();
var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));

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;
}

Answer 3

你可以接受日期的字符串输入，将其转换为javascript的日期对象，并从当前时间减去该日期以检查年龄。

代码段：

var birthday = '1994-01-01';
var dateObj = new Date(birthday);
var diffTime = Date.now() - dateObj.getTime();
var diffAge = new Date(diffTime);
var age = diffAge.getFullYear() - 1970;
if(age < 15 || age > 80){
    //do whatever here
console.log("age is not in the range");
}

您也可以将其减少到一行：

(new Date(Date.now() - (new Date(birthday)).getTime())).getFullYear() - 1970;

使用年龄验证验证dob

3 个答案: