如何使用 jQuery 验证表单，防止提交表单并在指定的 div 中显示正确的错误消息？答案

【问题标题】：How to validate the form using jQuery, prevent submission of form and show proper error messages in a specified div?如何使用 jQuery 验证表单，防止提交表单并在指定的 div 中显示正确的错误消息？
【发布时间】：2014-10-06 07:56:45
【问题描述】：

我在我的项目中使用 jQuery v1.7.1。

我有以下 HTML 表单：

<div class="alert-danger">                  
</div>
<form action="index.php" class="navbar-form pull-right" id="formzip" method="post">
  <input type="hidden" class="form-control" name="op" id="op" value="zip_code">
  <input type="hidden" class="form-control" name="form_submitted" id="form_submitted" value="yes">
  <input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip" id="zip" value=""> <i class="icon-zip" style="margin-top:3px;" onclick='$("#formzip").submit();'></i>
</form>

现在我想使用 jQuery 验证带有 id="formzip" 的表单。需要应用以下验证：

如果具有 id zip 的输入字段在提交表单时不包含任何值。
如果具有 id zip 的输入字段包含无效的美国邮政编码值或任何不是有效美国邮政编码的值。

我想在<div class="alert-danger"></div> 中显示相关的错误消息，并希望阻止表单提交。即当前显示的页面应保持原样。

验证美国邮政编码所需的正则表达式字符串如下：

"/^([0-9]{5})(-[0-9]{4})?$/i"

有人可以帮我实现这个功能吗？

如果有人能帮助我，那对我会有很大的帮助。

感谢您抽出宝贵的时间来了解我的问题。如果您想了解有关我的问题的更多信息，请随时问我。

等待您宝贵的回复。

提前致谢。

【问题讨论】：

你有没有尝试过自己解决这个问题？
@Derija93：实际上我已经在服务器端使用 PHP 进行了验证，但现在我必须在客户端使用 jQuery 进行验证，这就是我寻求帮助的原因。
嗯，这是一个开始。你很了解 jQuery 吗？一个建议是简单地处理表单提交事件并在必要时通过执行$('#formzip').on('submit', function(jqEvt){ jqEvt.preventDefault(); }); 取消它。这将完全阻止表单提交，它应该很容易适应您的需求。
@Derija93：感谢您的评论。但是，如果您可以发布您的可行代码作为答案，那对我和其他面临此类问题的人来说会很棒。您能否发布您的完整代码作为答案？
我没有必要重新发明轮子。正如其他两个答案所示，已经有很多插件可供验证。如果您对这些插件的工作原理感兴趣，您也可以只查看这些插件的源代码......或this SO question。

标签： javascript jquery forms validation jquery-1.7

【解决方案1】：

你可以这样做：-

$(function(){
$('#formzip').on('submit',function(){
   if($('#zip').val()=='')
   {
       $('.alert-danger').html('zipcode is empty');
       return false;
  }else if(!isValidZip($('#zip').val()))
  {
      $('.alert-danger').html('zipcode is invalid');
      return false;
  }
});
});

function isValidZip(zip) {
   var pattern = new RegExp(/^([0-9]{5})(-[0-9]{4})?$/i);
  return pattern.test(zip);
 };

或者如果你想显示相同的信息，你可以这样做：-

$('#formzip').on('submit',function(){
  if(!isValidZip($('#zip').val()))
  {
      $('.alert-danger').html('zipcode is invalid');
      return false;
  }
});

Demo

【讨论】：

：如果我按原样使用您的代码，那么我需要使用 HTML 中的以下代码行：onclick='$("#formzip").submit();'还是应该跳过这个文件？
你不应该使用，因为它在文本框上你应该使用按钮或提交

【解决方案2】：

您不需要为此使用任何自定义验证库。首先停止提交事件并让您的验证规则运行。删除您的 onClick 事件 for i elem。

只是一些想法。另一个人可能有不同的方法。

$(document).ready(function(){
$(".icon-zip").click(function(){
$(".alert-danger").html("");
var zip = $("#zip").val();
//run validations
var regex = /^([0-9]{5})(-[0-9]{4})?$/i;
if(!regex.test(zip)){
  $(".alert-danger").html("Invalid zip");
  return;
}

//if all ok
//do ajax request to server with your data
//Handle server response in ajax callback functios
$.ajax(function(){
 url:"index.php",
 type:"post",
 dataType: 'json',
 data: $("formzip").serialize(),
 success:function(data){
   if(data.status == "ok"){
     // show success msg
   }
 },
error:function(data){
     // show error msg
}

});

});
});

【讨论】：

【解决方案3】：

希望下面的内容和参考可以帮助到你

http://jqueryvalidation.org/

并从

查看演示

http://jqueryvalidation.org/files/demo/

【讨论】：