文章目录

jquery批量验证表单中文本框是否为空

前面我们讲了如何在form表单提交前验证的方法。

今天来讲一下另一种对表单验证的情况。

如果表单中有许多文本框,其中有一部分为必填。

普通的方法,就是对每一个必填的文本框进行验证,然后对其进行提示。

但是这样效率不高,而且还会多出许多代码来。

那么有什么简单的方法来实现批量验证呢?

方法当然是有的,下面是完整实例代码。

html代码<!doctype html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <title>jquery表单批量验证</title>
  <script src="xjs/jquery-1.8.3.min.js"></script>
  <style>
  ul{width:100%;float: left; margin:10px 0;padding: 0px; list-style: none;}
  li{float: left;}
  .red{color:red;}
  .selectshake{ border:1px solid #d00; background:#ffe9e8; color:#d00;}
  </style>
  </head>
  
  <body>
  <form name="form1" id="form1" method="post">
  <div>
     <ul>
  <li>姓名:</li>
  <li>
  <input name="name" id="name" class="requird" type="text" /><span class="red">*</span>
  </li>
  </ul>
  <ul>
  <li>电话:</li>
  <li>
  <input name="phone" id="phone" value="" type="text" />
  </li>
  </ul>
  <ul>
  <li>微信:</li>
  <li>
  <input name="weixin" id="weixin" class="requird" value="" type="text" /><span class="red">*</span>
  </li>
  </ul>
  <ul>
  <li>邮箱:</li>
  <li>
  <input name="mail" id="mail" class="requird" value="" type="text" /><span class="red">*</span>
  </li>
  </ul>
  <ul>
  <li>地址:</li>
  <li>
  <input name="address" id="address" class="general" value="" type="text" />
  </li>
  </ul>
     <ul>
     	<li><input type="submit" id="okbtn" name="okbtn" value="提交" /></li>
     </ul>
  </div>
  </form>
  <script>
  $("#okbtn").click(function(){
  var requird=true;
  $(".requird").each(function() {
         var val=$.trim($(this).val());
  if (val==''){
  $(this).focus();
  shake($(this),"selectshake",4);
  requird=false;
  return false;
  }
     });
  if (requird===true){
  alert("全部验证通过");
  //全部验证通过,执行程序
  }else{
  return false;
  }
  });
  function shake(ele,cls,times){//边框闪烁
  var i = 0,t= false ,o =ele.attr("class")+" ",c ="",times=times||2;
  if(t) return;
  t= setInterval(function(){
  i++;
  c = i%2 ? o+cls : o;
  ele.attr("class",c);
  if(i==2*times){
  clearInterval(t);
  ele.removeClass(cls);
  }
  },200);
  };
  </script>
  </body>
  </html>
亲自测试一下

来看一下表单中必填字段和普通的有什么不同?

发现没有,必填的我们给其定义了一个class="requird",我们就是依靠这个来对其进行遍历,然后验证的。

首先我们定义一个变量requird,将其设置为true。

再对样式为requird的字段使用ecah进行遍历,获取当前文本框的值,判断是否为空。

一旦为空,则将requird设置为false,并使用return false跳出each循环。

然后对requird进行判断,如果为true则表示表单验证通过可执行其他程序,如果为false则不能提交表单。

代码中的shake是一个自定义函数,是为了让文本框边框闪烁,达到提示的效果,可根据自己的需求删减代码。

以上就是jquery批量验证表单中文本框是否为空的详细解决方法,希望对小伙有帮助。

本文网址:http://www.santii.com/article/162.html


数据更新时间:2018-09-21