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

最新推荐文章于 2022-03-26 17:51:01 发布

cg20

最新推荐文章于 2022-03-26 17:51:01 发布

阅读量1.4k

点赞数 1

分类专栏： javascript jquery

javascript 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

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

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

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

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

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

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

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

    <!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