驗證日期輸入 - 最小值和最大值

Question

我對HTML5有一個小問題。

<input type="date" id="birthday" /> 

我想在JavaScript中檢查此字段。

Min。價值 - 01-01-1990。

我不知道如何解析日期對象並檢查是否正確。

屬性HTML5中的最小值和最大值不起作用。我必須在JavaScript中編寫驗證。

Answer 1

您可以使用JavaScript驗證庫，它使用了HTML5輸入屬性，如最小值和最大值：例如jQuery Validation：

<input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required /> 

<script> 
    $("#mydate").validate(); 
</script> 

看一看，因爲這搗鼓工作示例：http://jsfiddle.net/a5Mvt/1/

此外，如果不支持，您可能需要使用像Modernizr這樣的庫來檢查瀏覽器是否支持input[type="date"]，並使用jQuery UI或類似的日期選擇器控件。

---

更新：這裏有一個版本，不使用jQuery或任何其他額外的庫：

<input id="mydate" name="mydate" type="date" min="2000-01-01" max="2010-31-12" required /> 
<span id="mydate_error" style="display:none;"></span> 

<script> 
    var mydate = document.getElementById('mydate'), 
     mydateError = document.getElementById('mydate_error'); 

    mydate.addEventListener('input', function() { 
     if (!mydate.value.match(/\d{4}-\d{1,2}-\d{1,2}/)) { 
      mydateError.innerHTML = 'Please specify a valid date in the form 1990-02-22'; 
      mydateError.style.display = 'inherit'; 
     } else { 
      var value = new Date(mydate.value), 
       min = new Date(mydate.min), 
       max = new Date(mydate.max); 
      if (value < min || value > max) { 
       mydateError.innerHTML = 'Date has to be between ' + min.toDateString() + ' and ' + max.toDateString(); 
       mydateError.style.display = 'inherit'; 
      } else { 
       mydateError.style.display = 'none'; 
      } 
     } 
    }); 
</script> 

更新小提琴：http://jsfiddle.net/a5Mvt/2/