快捷導(dǎo)航

基于jQuery實現(xiàn)表單提交驗證

更新時間：2014年11月24日 11:20:14 投稿：hebedich

本文給大家分享的是一段基于jQuery的實現(xiàn)簡單的表單提交驗證的代碼，非常簡單實用，推薦給有相同需求的小伙伴們參考下。

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代碼：

復(fù)制代碼代碼如下:

$(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();
 });
 });

代碼很簡單，也很易懂，小伙伴們直接拿走用吧，這里就不詳細說明了。

您可能感興趣的文章: