javascript - jQuery 表单验证空白字段或格式错误的字段

Question

我希望在提交时验证日期。这意味着如果输入元素的值为空或格式错误，则会出现错误消息。

这是我的 HTML:

<form method="get" action="date-picker.html" id="frmdate" onsubmit="return validate()">
  <p>Start Date: <input type="text" name="txtdate" id="startdate"></p><span id="warning_startdate"></span>
  <p>End Date: <input type="text" name="txtdate" id="enddate"></p><span id="warning_enddate"></span>
  <input type="submit" value="send">
</form>

这是我的 jQuery:

$(function() {
  $( "#startdate, #enddate" ).datepicker({ dateFormat: 'yy-mm-dd' });
});

$('form').on('submit',function(e){
  if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) ) {
    e.preventDefault();
    document.getElementById("warning_startdate").innerHTML = ('please insert valid date & format');
  }
});

我需要使用插件吗？有什么办法可以在没有插件的情况下做到这一点？

如有任何帮助，我们将不胜感激。

Answer 1

您可以通过在 jquery 中使用正则表达式在没有插件的情况下实现它，并在表单提交事件中检查有效日期，如下所示

$(文档).ready(函数() {

$(function() {
  $( "#startdate, #enddate" ).datepicker({ dateFormat: 'yy-mm-dd' });
    });     //code indentation
$('form').on('submit',function(e){
   if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) )
  {
    e.preventDefault(); //stop form being submitted!
    alert('please insert valid date');
  }
});

});