使用JavaScript验证日期输入以计算闰年

Question

我试图在现有的stackoverflow答案中搜索解决方案，但我没有找到合适的答案。

我有3个领域：

• 年 - <input ...>
• 月 - <select>
• 日 - <input ...>

我的问题是涉及到闰年。如果用户选择二月，我需要根据提供的年份是否为闰年来限制日期输入。

例

• 鉴于2012 /二月 - 有效的输入将是1至29天
• 鉴于2013/Februrary - 有效的输入将是1至28天

不幸的是，我必须在所有现代浏览器以及IE7和IE8中支持这一点。

Answer 1

逻辑来自：Determine if a year is a leap year

下面是它是如何应用到一个简单的表格，片段演示。

我只接受2月份的有效性，试试看，如果您有任何问题，请告诉我。

function isLeapYear(yr) 
 
{ 
 
    return ((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0); 
 
} 
 

 
window.onload = function(){ 
 
    document.getElementById("validate").onclick = function(){ 
 
    var output = document.getElementById("isValid"); 
 
    var year = document.getElementById("year"); 
 
    var month = document.getElementById("month"); 
 
    var day = document.getElementById("day"); 
 
    
 
    var yearVal = parseInt(year.value); 
 
    var monthVal = parseInt(month.options[month.selectedIndex].value); 
 
    var dayVal = parseInt(day.value); 
 
    console.log(monthVal + "/" + dayVal + "/" + yearVal); 
 
    if(monthVal === 2){ 
 
     if(isLeapYear(yearVal)){ 
 
      output.innerHTML = dayVal >= 1 && dayVal <= 29 ? "Yes" : "No"; 
 
     }else{ 
 
     output.innerHTML = dayVal >= 1 && dayVal <= 28 ? "Yes" : "No"; 
 
     } 
 
    } 
 
    }; 
 
};

<input type="text" id="year" value="2012" /> 
 
<select id="month"> 
 
    <option value="1">Jan</option> 
 
    <option value="2" selected=selected>Feb</option> 
 
    <option value="3">Mar</option> 
 
    <option value="12">...etc...</option> 
 
</select> 
 
<input type="text" id="day" value="29" /> 
 
<br /> 
 
<button id="validate">Validate</button> 
 
<p> 
 
    IsValid: <span id="isValid"></span> 
 
</p>

Answer 2

构建基于输入年份，月份和日期的日期对象。 JavaScript 更正了无效日期，以便将生成的年份，月份和日期与用户输入进行比较。

function check_date(year, month, date) { 
 
    var y = Number(year); 
 
    var m = Number(month); 
 
    var d = Number(date); 
 
    var date = new Date(y, m - 1, d); 
 
    return (
 
    date.getFullYear() === y && 
 
    date.getMonth() === m - 1 && 
 
    date.getDate() === d 
 
); 
 
} 
 
document.getElementById("validate").onclick = function() { 
 
    alert(check_date(
 
    document.getElementById("year").value, 
 
    document.getElementById("month").value, 
 
    document.getElementById("date").value 
 
)); 
 
}

input, 
 
select { 
 
    width: 8em; 
 
}

<input id="year" placeholder="Year"> 
 
<select id="month"> 
 
    <option value="">Month</option> 
 
    <option value="1">Jan</option> 
 
    <option value="2">Feb</option> 
 
    <option value="3">Mar</option> 
 
    <option value="4">Apr</option> 
 
    <option value="5">May</option> 
 
    <option value="6">Jun</option> 
 
    <option value="7">Jul</option> 
 
    <option value="8">Aug</option> 
 
    <option value="9">Sep</option> 
 
    <option value="10">Oct</option> 
 
    <option value="11">Nov</option> 
 
    <option value="12">Dec</option> 
 
</select> 
 
<input id="date" placeholder="date"> 
 
<input id="validate" type="button" value="Check date">