基于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 = $("*");
 //$(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(''+errorMsg+'');
 }else{
 var okMsg = '输入正确';
 $parent.append(''+okMsg+'');
 }
 }
 if($(this).is('#email')){
 if(this.value==""||(this.value!=""&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))){
 var errorMsg = '请输入正确的E-mail地址';
 $parent.append(''+errorMsg+'');
 }else{
 var okMsg = '输入正确';
 $parent.append(''+okMsg+'');
 }
 }
 });
 $("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();
 });
 });

代码很简单，也很易懂，小伙伴们直接拿走用吧，这里就不详细说明了。