如何使用 javascript 验证 html 5 输入类型日期？

Question

我有一个表单，我使用了新的 html 5 输入类型“日期”。如何使用 javascript 验证它？输入类型数据的值是 mm-dd-yy 一起出现的，我们如何才能找出用户没有输入日期的哪一部分？mm或dd或yy？？我们知道输入类型日期的默认客户端验证可能由浏览器完成，但我也想要js上的代码，它可以工作。

*********************问题已更新*********************

**** 我正在尝试这些家伙！你能从中提出一些想法吗？需要帮助。 ****

我们都知道 input type='date' 值将是字符串类型，所以首先从 Js 我取值，然后我们知道日期格式类似于 dd/mm/yy 所以..它将是例如：- 04 /05/1995 现在，我尝试在这里将“/”替换为“0”，这将是一个数字，所以我猜现在应该是 0400501995。之后我使用正则表达式来测试输入类型日期是否有数字与否。如果用户输入了所有日期，那么它将是所有数字，我的测试将成功，它会跳到最后一个 else 语句。但问题是它不像我想的那样工作。我们可以那样做吗?

在 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 of 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 日期<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;
    } 
}