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');
  }
});

});

Answer 2

HTML:

<form action="" method="post" name="form" id="form">
  <p>Start Date <input type="text" id="startdate"></p>
  <p>End Date <input type="text" id="enddate"></p>  
  <input type="submit" id="signup" value="Send">            
</form>

Javascript:

$('#form').submit(function( event ) { 
  if (($("#startdate").val()) === "" || ($("#enddate").val()) === "") {
    alert('The fields start date and end date cannot be empty. Please enter value.');
    return false;
  } else if(! ( /\d{2}-\d{2}-\d{2}/.test($('#startdate').val() ) && /\d{2}-\d{2}-\d{2}/.test($('#enddate').val() ) ) ) {  
    alert('Please insert date in valid format.');
    return false;
  } else {
    $("#form").attr("action", "date-picker.html");
    $( "#form" ).submit();
  }
});

JSFiddle

jQuery 对空白字段或格式错误的字段进行表单验证

jQuery form validation for a blank field or a field with the wrong format

html

javascript

jquery

jquery-plugins