使用JavaScript验证日期输入以说明闰年

时间:2015-05-13 05:54:33

标签: javascript validation date

我尝试在现有的stackoverflow答案中搜索解决方案,但我找不到合适的答案。

我有3个字段:

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

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

示例

  • 鉴于2012/2月 - 有效输入将为1至29天
  • 鉴于2013 / Februrary - 有效输入将为1至28天

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

2 个答案:

答案 0 :(得分:2)

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

以下是它如何应用于简单表单,代码段演示。

我只对2月有效,请尝试一下,如果您有任何问题请告诉我。

&#13;
&#13;
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";
      }
    }
  };
};
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

根据输入年,月和日期构建日期对象。 JavaScript 更正无效日期,因此将生成的年,月和日期与用户输入进行比较。

&#13;
&#13;
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
  ));
}
&#13;
input,
select {
  width: 8em;
}
&#13;
<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">
&#13;
&#13;
&#13;