Question

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

这是我的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中的正则表达式来实现它，并在表单提交事件中检查有效日期，如下所示

$（document）.ready（function（）{

$(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表单验证

2 个答案: