2016-04-15 101 views
0

如何在提交前检查<input type="date">以验证它是否超过当天的日期?验证<input type =“date”>

如果将来的日期是在输入表单将不会提交,

<html> 
<head> 
</head> 
<body> 
    <form> 
     <ul> 
      <li> 
       <label>Member Since </label> 
       <input id="since" name="since" size="2" maxlength="6" value="" type="date" required /> 
      </li> 
      <li> 
       <input type="Submit" name="Submit" id="btnsubmit" value="Submit" onclick="checkDate();" /> 
      </li> 
     </ul> 
    </form> 
</body> 
</html> 
+0

在您的checkDate函数中,从输入字段检索值。然后创建一个新的Date()对象,设置为您希望确保输入未超出的那一天。从那里,你可以做两个日期之间的简单比较。 –

回答

2

尝试将输入值转换为Date Object以比较今天和脚本中的输入值。

input = document.getElementById("since"); // gets element 
value = input.value; // form value (string) 
date = new Date(value); // converts string to date object 
now = new Date(); // current date 
if (now > date) { 
    // in past 
} else { 
    // in future 
} 
+0

谢谢你,伙计 它的工作原理 –

0

类似的东西应该帮助你。

var dateText = document.getElementById('since').value; 
var date = new Date(dateText); 
var now = new Date(); 
if (date > now) { 
    console.log("Date needs to be in the past"); 
} 
1

您需要检查两件事。
1)是输入的有效日期,
2)是您想要的范围内的日期。
尝试下面的代码,它会在允许提交之前检查两个条件。

<html> 
    <head></head>  
    <body>  
    <script> 
    function checkDate() { 
    var val = new Date(document.forms["frm"]["since"].value); 
    var now = new Date(); 
    if (isNaN(val.getTime()) || (val>now)) { 
     alert('invalid date'); 
     return false; 
     } 
     return true; 
    } 
    </script> 
     <form name="frm" onsubmit="return checkDate()"> 
    <ul> 
     <li> 
     <label>Member Since </label> 
     <input id = "since" name="since" size="2" maxlength="6" value="" type="date" required/> 
     </li> 
     <li> 
     <input type="Submit" name="Submit" id="btnsubmit" value="Submit" /> 
     </li> 
    </ul> 
    </form> 
</body> 
</html> 
相关问题