使用JavaScript验证日期输入以考虑闰年

Question

我尝试在已有的stackoverflow答案中寻找解决方案，但没有找到合适的答案。

我有三个字段：

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

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

示例

• 给定2012 / 二月 - 有效输入为1至29天
• 给定2013 / 二月 - 有效输入为1至28天

不幸的是，我需要在所有现代浏览器以及IE7和IE8中支持此功能。

- Som

---

根据月份，在“select”框的“onchange”事件中更改“day”输入的“min”和“max”。但我不确定ie7和8。 - Zee

输入的最大值不支持IE7、IE8和IE9。http://www.w3schools.com/tags/att_input_max.asp :( - Som

为什么不对日期也使用下拉框，这样当月份改变时，还可以隐藏29到31号的日期。 - Pete

@Pete 这是给我的要求。 - Som

你能展示一下你尝试过的代码吗？或者你可以尝试使用HTML5shiv或ie7.js来使min max在ie7+中工作（参见此帖子） - Pete

Answer 1

逻辑来自：JavaScript中判断闰年的方法

以下是如何应用到一个简单表单中的示例代码。

我只为二月份验证了有效性，试一下并让我知道您是否有任何问题。

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>

- VulgarBinary

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

- Salman A

---

多糟糕的例子。 - dzh