使用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">