年齢確認付きのdobを確認する

Question

誰かが15歳から80歳の間のフォームに記入しようとしている場合は作成しようとしていますが、生年月日を使用して年齢は15〜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> 
 
     \t </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> 
 
     \t </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

の間にあるかどうかを確認するために、月、年、その日をチェックして、あなたの処理を行うことができます目的を果たす。

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

あなたも1行にこれを減らすことができます。

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