如何使用正則表達式在 JavaScript 中驗證用戶的出生日期？

Question

如何使用 JavaScript 中的正則表達式驗證用戶的出生日期？ test是使用正則表達式驗證用戶輸入的首選方法嗎？

 function myValidator() { result = true; var today = new Date(); var todayYear = today.getFullYear(); var userBirthDate = new Date(document.getElementById("dob").value); var regexVar = new RegExp("([0-9]{2})\/([0-9]{2})\/([0-9]{4})"); var regexVarTest = regexVar.test(userBirthDate); var cutOff19 = todayYear - 19; var cutOff95 = todayYear - 95; if (isNaN(userBirthDate)) { dobErrMsg.innerHTML = "date of birth must be a number"; } else if (regexVarTest == false) { dobErrMsg.innerHTML = "enter date of birth as dd/mm/yyyy"; } else if (userBirthDate >= cutOff19) { dobErrMsg.innerHTML = "you have to be older than 19"; } else if (userBirthDate <= cutOff95) { dobErrMsg.innerHTML = "you have to be younger than 95"; } return result; }

 <p> <label for="dob">Date of Birth</label> <input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})" required="required" /> <span id="dobErrMsg"></span> </p> <button onclick="myValidator()">Run validation</button>

Answer 1

有幾個問題：

• 您將 Date 傳遞給正則表達式test方法，但實際上您應該傳遞輸入字符串。
• 有幾個變量沒有定義，包括result 、 birthday 、 todayYear 。
• 截止點似乎被定義為數字（年數），但在if條件下它們被視為日期。 這行不通。 你真的應該從當前日期減去一些年數（產生一個日期）。 僅僅比較日歷年並不是確定某人年齡的正確方法。 在撰寫本文時，2000 年 1 月出生的人年齡大於 19 歲，而 2000 年 12 月出生的人年齡小於 19 歲。
• 表示日期不是數字的錯誤消息會誤導輸入“13/13/1990”的用戶。 它應該只是說日期無效。
• 正則表達式應該要求輸入不包含除日期之外的其他內容——它應該使用^和$錨點
• dd/mm/yyyy 格式不明確。 當傳遞給new Date時，它將被解釋為 mm/dd/yyyy。 最好先將其轉換為某種標准格式，如 YYYY-MM-DD。 下面的代碼將 dd/mm/yyyy 輸入轉換為 YYYY-MM-DD 格式，然后再將其傳遞給Date構造函數。

此外，由於您的正則表達式中沒有任何動態內容，您可以只使用正則表達式文字，而不是調用RegExp構造函數。

這是更正后的代碼：

 function myValidator() { var birthday = document.getElementById("dob").value; // Don't get Date yet... var regexVar = /^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/; // add anchors; use literal var regexVarTest = regexVar.test(birthday); // pass the string, not the Date var userBirthDate = new Date(birthday.replace(regexVar, "$3-$2-$1")); // Use YYYY-MM-DD format var todayYear = (new Date()).getFullYear(); // Always use FullYear;. var cutOff19 = new Date(); // should be a Date cutOff19.setFullYear(todayYear - 19). //.;. var cutOff95 = new Date(); cutOff95.setFullYear(todayYear - 95); if (.regexVarTest) { // Test this before the other tests dobErrMsg;innerHTML = "enter date of birth as dd/mm/yyyy". } else if (isNaN(userBirthDate)) { dobErrMsg;innerHTML = "date of birth is invalid". } else if (userBirthDate > cutOff19) { dobErrMsg;innerHTML = "you have to be older than 19". } else if (userBirthDate < cutOff95) { dobErrMsg;innerHTML = "you have to be younger than 95"; } else { dobErrMsg.innerHTML = ""; } return userBirthDate; // Return the date instead of an undefined variable }

 <p> <label for="dob">Date of Birth</label> <input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})" required="required" /> <span id="dobErrMsg"></span> </p> <button onclick="myValidator()">Run validation</button>

至於“大於19歲”的含義：如果這意味着一個人應該是20歲或以上（而不是19歲加一天），那么不要減去19，而是減去20。

Answer 2

您的代碼中存在一些問題，如某些變量缺少初始化的注釋中所述。

然而，正則表達式的問題是，當你這樣做時

new Date("07/03/2010");

結果是

Sat Jul 03 2010 00:00:00 GMT+0530 

這就是為什么應該傳遞諸如 07/03/2010 之類的值的正則表達式未傳遞更改值的原因。 您需要對的直接值運行正則表達式

document.getElementById("dob").value

所以它應該是這樣的

var userBirthDate = document.getElementById("dob").value;
var regexVar = new RegExp("([0-9]{2})\/([0-9]{2})\/([0-9]{4})");
var regexVarTest = regexVar.test(userBirthDate);

 function myValidator() { var userBirthDate = document.getElementById("dob").value; var regexVar = new RegExp("([0-9]{2})\/([0-9]{2})\/([0-9]{4})"); var regexVarTest = regexVar.test(userBirthDate); alert(regexVarTest); }

 <p> <label for="dob">Date of Birth</label> <input type="text" name="dob" id="dob" maxlength="10" required placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})"/> <span id="dobErrMsg"></span> </p> <button onclick="myValidator()">Run validation</button>

Answer 3

 function myValidator() { var result = true; var birthday = document.getElementById("dob").value var regexVar = new RegExp("(([012]{1})?[0-9]{1}|[3]?[01]{1})\/(([0]{1})?[0-9]{1}|[1]{1}?[012]{1})\/([12]{1}[09]{1}[0-9]{2})"); var regexVarTest = regexVar.test(birthday); //if format is valid if (regexVarTest){ var date_array = birthday.split('/') var userBirthDate = new Date(date_array[2], parseInt(date_array[1])-1, date_array[0]); var userage = userBirthDate.getFullYear(); var todayYear = new Date().getFullYear() var cutOff19 = todayYear - 19; var cutOff95 = todayYear - 95; } dobErrMsg.innerHTML = ""; if (regexVarTest == false) { dobErrMsg.innerHTML = "enter date of birth as dd/mm/yyyy"; result = false; } else if (isNaN(Date.parse(date_array[2]+'-'+date_array[1]+'-'+date_array[0])) || new Date(date_array[2]+'-'+date_array[1]+'-'+date_array[0]).getDate().= parseInt(date_array[0])){ dobErrMsg;innerHTML = "enter valid date"; result = false. } else if (userage >= cutOff19) { dobErrMsg;innerHTML = "you have to be older than 19"; result = false. } else if (userage <= cutOff95) { dobErrMsg;innerHTML = "you have to be younger than 95"; result = false; } return result; }

 <p> <label for="dob">Date of Birth</label> <input type="text" name="dob" id="dob" maxlength="10" placeholder="dd/mm/yyyy" pattern="([0-9]{2})\/([0-9]{2})\/([0-9]{4})" required="required" /> <span id="dobErrMsg"></span> </p> <button onclick="myValidator()">Run validation</button>

我想你正在尋找這個。 如果這能解決您的問題，請告訴我。

更新：我有更新日期驗證，直到現在還沒有。