如何使用正则表达式在 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"的用户。它应该只是说日期无效。
• 正则表达式应该要求输入不包含日期以外的其他内容——它应该使用^和$锚点
• 日/月/年格式不明确。当传递给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>

我想你正在寻找这个。让我知道这是否解决了您的问题。

更新：我有更新日期验证，到目前为止一直丢失。