基于jQuery实现表单提交验证

html表单代码：

复制代码代码如下:

   <form method="post" action=""> 
       <div class="int"> 
          <label for="username">用户名：</label> 
          <input type="text" id="username" class="required"/> 
       </div> 
       <div class="int"> 
           <label for="username">邮箱：</label> 
           <input type="text" id="email" class="required"/> 
       </div> 
       <div class="int"> 
           <label for="username">个人资料：</label> 
           <input type="text" id="personinfo"/> 
       </div> 
       <div class="sub"> 
           <input type="submit" value="提交" id="send"/> 
           <input type="reset" id="res"/> 
       </div> 
   </form>  

jQuery代码：

复制代码代码如下:

          $(function(){ 
            $("form :input.required").each(function(){ 
                var $required = $("<strong class='high'>*</strong>"); 
                //$(this).parent().append($required);  //追加到文档中 
                $(this).parent().prepend($required); 
            }); 
            $('form :input').blur(function(){ 
                var $parent = $(this).parent(); 
                if($(this).is('#username')){ 
                   if(this.value==""||this.value.length<6){ 
                      var errorMsg = '请输入至少6位的用户名'; 
                      $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); 
                   }else{ 
                       var okMsg = '输入正确'; 
                       $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 
                   } 
                } 
                if($(this).is('#email')){ 
                    if(this.value==""||(this.value!="" &&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){ 
                        var errorMsg = '请输入正确的E-mail地址'; 
                        $parent.append('<span class="formtips onError">'+errorMsg+'</span>'); 
                    }else{ 
                        var okMsg = '输入正确'; 
                        $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>'); 
                    } 
                } 
            }); 
            $("form :input").focus(function(){ 
                var $parent = $(this).parent(); 
                $parent.find(".formtips").remove(); 
            }); 
            $("#send").click(function(){ 
               var $parent = $(this).parent().parent(); 
               $parent.find(".formtips").remove(); 
               $("form .required:input").trigger('blur'); 
               var numError = $('form .onError').length; 
               if(numError){ 
                  return false; 
               } 
            }); 
            $("#res").click(function(){ 
                var $parent = $(this).parent().parent(); 
                $parent.find(".formtips").remove(); 
            }); 
        });