首页 > 前端特效js代码大全 > jquery表单验证代码

jquery表单验证代码

发布-网页培训班 | 浏览量-

html代码

XML/HTML Code复制内容到剪贴板
  1.  <body>  
  2.   
  3.    
  4. <form method="post" action="">  
  5.     <div class="int">  
  6.         <label for="username">用户名:</label>  
  7.         <!-- 为每个需要的元素添加required -->  
  8.         <input type="text" id="username" class="required" />  
  9.     </div>  
  10.     <div class="int">  
  11.         <label for="email">邮箱:</label>  
  12.         <input type="text" id="email" class="required" />  
  13.     </div>  
  14.     <div class="int">  
  15.         <label for="personinfo">个人资料:</label>  
  16.         <input type="text" id="personinfo" />  
  17.     </div>  
  18.     <div class="sub">  
  19.         <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>  
  20.     </div>  
  21. </form>  
  22.    
  23. </body>  
 
 jquery代码
JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">  
  2.    
  3. $(function(){  
  4.         /* 
  5.         *思路大概是先为每一个required添加必填的标记,用each()方法来实现。 
  6.         *在each()方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。 
  7.         *这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素。 
  8.         *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。 
  9.         *这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证。 
  10.         *在jQuery框架中,也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value,和this.value.length。对内容进行判断。 
  11.         *然后进行的是邮件的验证,貌似用到了正则表达式。 
  12.         *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证,调用blur事件就行了。用triggerHandler()触发器,触发相应的事件。 
  13.         *最后提交表单时做统一验证 
  14.         *做好整体与细节的处理 
  15.         */  
  16.         //如果是必填的,则加红星标识.  
  17.         $("form :input.required").each(function(){  
  18.             var $required = $("<strong class='high'> *</strong>"); //创建元素  
  19.             $(this).parent().append($required); //然后将它追加到文档中  
  20.         });  
  21.          //文本框失去焦点后  
  22.         $('form :input').blur(function(){  
  23.              var $parent = $(this).parent();  
  24.              $parent.find(".formtips").remove();  
  25.              //验证用户名  
  26.              if( $(this).is('#username') ){  
  27.                     ifthis.value=="" || this.value.length < 6 ){  
  28.                         var errorMsg = '请输入至少6位的用户名.';  
  29.                         $parent.append('<span class="formtips onError">'+errorMsg+'</span>');  
  30.                     }else{  
  31.                         var okMsg = '输入正确.';  
  32.                         $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');  
  33.                     }  
  34.              }  
  35.              //验证邮件  
  36.              if( $(this).is('#email') ){  
  37.                 ifthis.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){  
  38.                       var errorMsg = '请输入正确的E-Mail地址.';  
  39.                       $parent.append('<span class="formtips onError">'+errorMsg+'</span>');  
  40.                 }else{  
  41.                       var okMsg = '输入正确.';  
  42.                       $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');  
  43.                 }  
  44.              }  
  45.         }).keyup(function(){  
  46.            $(this).triggerHandler("blur");  
  47.         }).focus(function(){  
  48.              $(this).triggerHandler("blur");  
  49.         });//end blur  
  50.    
  51.           
  52.         //提交,最终验证。  
  53.          $('#send').click(function(){  
  54.                 $("form :input.required").trigger('blur');  
  55.                 var numError = $('form .onError').length;  
  56.                 if(numError){  
  57.                     return false;  
  58.                 }   
  59.                 alert("注册成功,密码已发到你的邮箱,请查收.");  
  60.          });  
  61.    
  62.         //重置  
  63.          $('#res').click(function(){  
  64.                 $(".formtips").remove();   
  65.          });  
  66. })  
  67.    
  68. </script>  

js数组的操作大全

 

javascript 刷新页面方法大全

原文地址:http://www.35ui.cn/post/2016012029.html

标签jquery表单

上一条: jquery操作cookie jquery.cookie中的操作
下一条: 蓝屏代码大全 电脑蓝屏代码大全

  • 作品
  • 素材
  • ued
  • 资源
  • 前端工程师
  • Asp网页培训班
  • jquery培训班
  • 北京网站制作
  • logo设计培训班
  • 做网站常用代码