如何使用javascript驗證html 5輸入類型日期？

Question

我有一個使用新的html 5輸入類型'date'的表單。如何使用javascript進行驗證？輸入類型數據的值以mm-dd-yy一起出現，因此，我們如何找出該部分的日期不是由用戶輸入的嗎？是mm還是dd或yy？我們知道輸入類型日期有默認的客戶端驗證，可以由瀏覽器完成，但是我也想要js上的代碼來完成這項工作。

*********************問題已更新**********************

****我正在嘗試這些家伙！您能從中提出一些想法嗎？需要幫助。 ****

我們都知道輸入type ='date'的值將是字符串類型，因此，首先從Js中獲取該值，然后我們知道日期格式就像dd / mm / yy這樣..它將是：-04/05 /現在是1995年，我在這里嘗試將'/'替換為'0'，這將是一個數字，所以我猜現在應該是0400501995.之后，我使用正則表達式測試該輸入類型date是否具有數字如果用戶輸入了所有日期，則它將是所有數字，並且我的測試將成功，並且將跳到其他語句上。但是問題是它不符合我的預期，我們可以這樣做嗎？

在HTML上我得到了

     Birthday: &nbsp;<input type="date" id='theDate' name="birthday"><br> 

我的Js如下所示。

   var mydate = document.getElementById('theDate').value;
   var replacement = mydate.replace('/','0'); 
   var check = /^[0-9]+$/; 
   if(!check.test(mydate)) 
       {
          document.getElementById('theDate').style.borderColor = "red";
          document.getElementById('errorbdaysu').style.display = "inline";
          document.getElementById('errorbdaysu').innerHTML = "Please fill up all your date";
       }  
 else {
        document.getElementById('theDate').style.borderColor = "green";
        document.getElementById('errorbdaysu').style.display = "none";
      }        

Answer 1

我們如何確定用戶未輸入日期的哪一部分？是mm還是dd或yy？

如果未設置mm/dd/yyyy每個value ，則input type="date"值將返回空字符串。

input type="date"有效屬性包括min ， max ，可用於指定有效日期選擇的范圍。

參見input type="date"

 $("input").on("input", function() { console.log(this.value) $("output").html(this.value) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <!-- set valid range input date between `"2015-09-07"` - `"2015-09-30"` --> <input id="date" type="date" min="2015-09-07" max="2015-09-30" /> <output for="date"></output> 

Answer 2

HTML date <input>日期字段是常規輸入字段，在某些瀏覽器中具有特殊的輸入框。 因此，您可以使用以下代碼在JavaScript中對其進行驗證。

HTML：

<input type="date" id="dfield">
<button onClick="isCorrect()">Test</button>

JS：

function isCorrect() {
    // For form of mm-dd-yy
    var x = document.getElementById("dfield").value;
    if(isNaN(x.substring(0, 1)) || isNaN(x.substring(3, 4)) || isNaN(x.substring(6, 9))) {
        return false;
    } else {
        return true;
    } 
}