javascript HTML5 年龄验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23884999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Age Validation
提问by user3679003
I am required to create a form using HTML5 that has this validation;
我需要使用具有此验证的 HTML5 创建表单；
Date of birth should be a valid date in the format dd/mm/yyyy. After entering the DOB, the page should calculate the age and alert the user if he/she is under 18 with the message “You must be over 18 to register”
出生日期应该是格式为 dd/mm/yyyy 的有效日期。输入出生日期后，页面应计算年龄并提醒用户如果他/她未满 18 岁并显示消息“您必须年满 18 岁才能注册”
Could anyone please make my understand how I code create this validation? The could below is how my form looks like.
任何人都可以让我理解我的代码是如何创建这个验证的吗？下面的可能是我的表格的样子。
<div id="content">
<article id="contentimg">
<form action="http://posttestserver.com/post.php" onsubmit="return validate_form(this)" method="post">
<fieldset style="border: 1px solid; padding: 10px;">
<legend>Enter your information to subscirbe:</legend>
First name: <input class="glowing-border" type="text" name="firstname" required><br>
Last name: <input class="glowing-border" type="text" name="lastname" required><br>
Birthday: <input class="glowing-border" type="date" name="bday"><br>
Address: <input class="glowing-border2" type="text" name="address"><br>
Mobile Number: <input class="glowing-border" type="text" name="mobno"><br>
Email: <input id="email" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}"><br>
Confirm Email: <input id="confemail" class="glowing-border" type="email" name="email" required pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}"
onfocus="validateMail(document.getElementById('email'), this);" oninput="validateMail(document.getElementById('email'), this);"><br>
<input class="glowing-border" type="submit" value="Submit">
<input class="glowing-border" type="reset" value="Reset">
</fieldset>
</form>
</article>
</div>
回答by mplungjan
In Chrome, if it is set to type="text" we can do this onblur or onsubmit
在 Chrome 中，如果将其设置为 type="text" 我们可以在 onblur 或 onsubmit 中执行此操作
function validateDOB(bday) {
var dateString = bday.value;
var parts = dateString.split("/"); // not testing if the format is correct here
var now = new Date();
var birthday = new Date(now.getFullYear(),parts[1]-1,parts[0]);
var age = now.getFullYear()-parts[2];
if (now<birthday) age--;
if (age<18) {
alert("You must be over 18 to register");
return false
}
// other validation
return true;
}
I am looking into how to do the same on an HTML5 date field
我正在研究如何在 HTML5 日期字段上做同样的事情
This does not work for some reason
由于某种原因，这不起作用
function getDob() {
var date = new Date();
return (date.getMonth()+1)+"-"+date.getDate()+"-"+(date.getFullYear()-18);
}
$(function() {
$("input[type=date]").prop("max",getDob());
});
UPDATE - min/max has little support.
更新 - min/max 几乎没有支持。
Instead use jQuery date validation
而是使用 jQuery 日期验证
$(function() {
$("input[type=date]").prop("max",getDob());
$("#bday").validate();
});
using
使用
<input id="bday" required="required" min="1900-01-01" max="2099-09-13" type="date" >
回答by rjdmello
One more idea is
还有一个想法是
<input type="number" size="4" name="age" min="18" required style="display:none;">
add this field and calculate on change Birthday field
添加此字段并计算更改生日字段
