如何继续检查表单更新Javascript
如何继续检查表单更新Javascript
提问于 2016-12-16 00:19:06
在我的表单中，我有下面的元素have年，它使用户能够输入
<form id="mail" action="form.php" method="post" onsubmit="validateForm()">
<label for="dateOfBirth">Date of Birth</label>
<input type="number" id="day" name="day" max="31" placeholder="Day" >
<input type="number" id="month" name="month" placeholder="Month" max="12" >
<input type="number" id="year" name="year" placeholder="Year" max="2016"/>
<input type="submit" value="submit">
</form>当按下提交按钮时，它应该检查用户是否超过18岁。如果他年满18岁，应提交表格。如果用户未超过18岁，则应显示错误。验证年龄的代码是有效的，唯一的问题是我不知道该如何放置代码。
var day = getElementById("day").value;
var month = getElementById("day").value;
var year = getElementById("day").value;
var age = 18;
var mydate = new Date();
mydate.setFullYear(year, month-1, day);
var currdate = new Date();
var setDate = new Date();
setDate.setFullYear(mydate.getFullYear() + age, month-1, day);
function validateForm() {
if ((currdate - setDate) > 0){
preventDefault(); // Prevent it being sent
var details = $('#mail').serialize(); // Serialize form data
$.post('form.php', details, function(data) { // Use $.post() to send it
$('#mail').html(data); // Where to display result
});
alert("above 18");
}else{
alert("below 18");
$("form").submit(function(e){
alert('submit intercepted');
e.preventDefault(e);
});
}
}检查年龄http://jsfiddle.net/Ttsa8/5/的代码
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-16 01:14:21
如果要计算日期输入字段(日、月、年)与当前时间之间的年龄，则可以通过jquery这样做。
当您更改字段的值或提交表单时，它将检查时间。
这个想法就是基于这个。
<!DOCTYPE html>
<html lang="en">
<head>
<title>calculates the age between the date input fields and the current time</title>
<meta charset="utf-8">
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
</head>
<body>
<form id="form">
<label for="dateOfBirth">Date of Birth</label>
<input type="number" id="day" name="day" max="31" placeholder="Day" >
<input type="number" id="month" name="month" placeholder="Month" max="12" >
<input type="number" id="year" name="year" placeholder="Year" max="2016"/>
<input type="submit" id="mail" value="submit">
</form>
<script>
function validate()
{
if (!$("#day").val()) {
return false;
}
if (!$("#month").val()) {
return false;
}
if (!$("#year").val()) {
return false;
}
return true;
}
function calculateAge()
{
var ageLimit = 18;
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
if (!validate()) {
console.log('invalid form');
return false;
}
todayDate = new Date();
todayYear = todayDate.getFullYear();
todayMonth = todayDate.getMonth();
todayDay = todayDate.getDate();
diffYear = todayYear - year;
if (todayMonth < (month - 1))
{
diffYear--;
}
if ((month - 1) == todayMonth && todayDay < day)
{
diffYear--;
}
if (diffYear >= ageLimit){
// you are above 18
console.log('above 18');
return true;
}
console.log('below 18');
return false;
}
$('#form').on('submit', function(e) {
if (!validate()) {
console.log('invalid form');
return false;
}
if (calculateAge()) {
// the post will happen here if the form is valid and it is above the age limit
console.log('submit fired');
return true;
}
console.log('submit blocked');
return false;
});
$('#month').on('change', function(e) {
calculateAge();
});
$('#day').on('change', function(e) {
calculateAge();
});
// This is a shortcut for .on("change", handler)
$('#year').change(function() {
calculateAge();
});
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41175474
复制相关文章
相似问题
腾讯云开发者
