0

我在我的项目中使用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>

现在在这里我想id="formzip"使用 jQuery 来验证表单。需要申请以下验证：

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

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

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

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

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

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

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

等待您宝贵的回复。

提前致谢。

4

3 回答 3

2

你可以做这样的事情： -

$(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;
  }
});

演示

于 2014-10-06T08:12:09.477 回答
1

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

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

$(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
}

});

});
});
于 2014-10-06T08:11:47.550 回答
0

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

http://jqueryvalidation.org/

并查看演示

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

于 2014-10-06T08:00:24.163 回答