如何验证日期,月份和时间的3个单独的输入字段?一年使用jquery或javascript?

时间:2016-05-13 06:13:36

标签: javascript jquery html css validation

我有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> 

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

4 个答案:

答案 0 :(得分:1)

为自己做一点练习,希望这会有所帮助

&#13;
&#13;
$('#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))
      	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();
});
&#13;
<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>
&#13;
&#13;
&#13;

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

答案 1 :(得分:1)

检查!!我创建了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>

答案 2 :(得分:0)

您只需按以下方式使用输入框:

<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">

然后根据您的要求分开日期,月份和年份。

答案 3 :(得分:0)

尝试以下脚本:

  <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>
相关问题