我如何验证3个单独的输入字段的日期，月份和年份使用jQuery或JavaScript？

Question

我有3个单独的日期，月份和年份的输入字段。

日期字段仅接受范围1-31中的值，月份字段仅接受范围1-12中的值。我想要的日期格式是dd mm yyyy。

以下是我的HTML代码请帮助我的任何一个。

<div class="date"> 
    <input id="date" name="day" /> 
    <input id="month" name="month" /> 
    <input id="year" name="year /> 
</div> 

所有输入字段都是文本框。

Answer 1

只要您可以使用您输入框下面的方法：

<input type="number" name="date" min="1" max="31" /> 
<input type="number" name="month" min="1" max="12" /> 
<input type="number" name="year" min="1900" max="9999" /> 

更好的使用日期字段：

<input type="date" name="date" id="date"> 

，然后独立日，月和年按您的要求。

Answer 2

只是一点点的做法为自己和希望这有助于

$('#submit').click(function(){ 
 
    var date = parseInt($('#date').val()); 
 
    var month = parseInt($('#month').val()); 
 
    var year = parseInt($('#year').val()); 
 
    if (isNaN(date) || isNaN(month) || isNaN(year)) { 
 
    alert('wrong format'); 
 
    return false; 
 
    } else { 
 
    if (date > 31 || date < 1) { 
 
     alert('wrong date'); 
 
     return false; 
 
    } else if ((month==4 || month==6 || month==9 || month==11) && date ==31) { 
 
     alert('wrong date'); 
 
     return false; 
 
    } else if (month==2) { 
 
    var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0)); 
 
     if (date> 29 || (date ==29 && !isleap)) 
 
     \t alert('wrong date'); 
 
     return false; 
 
    } 
 
    if (month > 12 || month < 1) { 
 
     alert('wrong month'); 
 
     return false; 
 
    } 
 
    if (year > 2050 || year < 1900) { 
 
     alert('wrong year'); 
 
     return false; 
 
    } 
 
    } 
 
    $('#myform').submit(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form action="" id="myform" method="POST"> 
 
<label for="date">Date</label> 
 
<input type="text" id="date" name="date" /> 
 
<label for="month">Month</label> 
 
<input type="text" id="month" name="month" /> 
 
<label for="year">Year</label> 
 
<input type="text" id="year" name="year" /> 
 
<input id="submit" type="submit" value="Submit"> 
 
</form>

参考：http://www.jquerybyexample.net/2011/12/validate-date-using-jquery.html

Answer 3

试试下面的脚本：

<script> 
    function validateForm() { 
     var d = document.forms["myForm"]["date"].value; 
     var m = document.forms["myForm"]["month"].value; 
     var y = document.forms["myForm"]["year"].value; 

     if(d == null || d == ""){ 
      alert("Please select date."); 
      return false; 
     } 
     if(m == null || m == ""){ 
      alert("Please select date."); 
      return false; 
     } 
     if(y == null || y == ""){ 
      alert("Please select date."); 
      return false; 
     } 
     if((m == 4 || m == 6 || m == 9 || m == 11) && d == 31) { 
      alert("Selected month contains only 30 days."); 
      return false; 
     } 
     if(m == 2 && d > 29 && (y%4 == 0)) { 
      alert("Selected month contains only 29 days."); 
      return false; 
     } 

     if((m == 2) && d > 28) { 
      alert("Selected month contains only 28 days."); 
      return false; 
     } 
     return true; 
    } 
</script> 

和形式是：

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> 
<input type="number" id="d" name="date" min="1" max="31" /> 
<input type="number" id="m" name="month" min="1" max="12" /> 
<input type="number" id="y" name="year" min="1900" max="9999" /> 
<input type="submit" value="Submit"> 

</form> 

Answer 4

检查它！我创建了3个文本字段，这是日月年，并通过JavaScript验证。

 <script type="text/javascript"> 
      function dateChecker() 
      { 
      var dayValidate = "([1-9]|[12]\d|3[01])"; 
      var monthValidate = "^(0?[1-9]|1[012])$"; 
      var yearValidate = "/^(19[5-9]d|20[0-4]d|2050)$/"; 
      var days = document.getElementById('dayId').value; 
      var months = document.getElementById('monthId').value; 
      var years = document.getElementById('yearID').value; 

      if (!days.match(dayValidate)) 
      { 
       alert("Please, Enter Days between 1 to 31 "); 
       document.form1.dayId.focus(); 
       return false; 
      } 

      if (!months.match(monthValidate)) 
      { 
       alert("Please, Enter Months in between 1 to 12 "); 
       document.form1.monthId.focus(); 
       return false; 
      } 

      if (!(+years >= 1900 && +years <= 2016)) 
      { 
       alert("Please, Enter Years in between 1900 to 2016 "); 
       document.form1.yearID.focus(); 
       return false; 
      } 

     } 


     </script> 

     <form name="form1"> 
     <table> 
      <tr> 
       <td> 
        <input type="text" id="dayId"/> 
       </td> 
       <td> 
        <input type="text" id="monthId"/> 
       </td> 
       <td> 
        <input type="text" id="yearID"/> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type="submit" onclick="returndateChecker();"/> 
       </td> 
      </tr> 
     </table> 
    </form>