首頁 > web前端 > js教程 > 基於jQuery實作表單提交驗證_jquery

基於jQuery實作表單提交驗證_jquery

WBOY
發布: 2016-05-16 16:30:34
原創
1373 人瀏覽過

html表單代碼:

複製程式碼 程式碼如下:

  

      

         
         
      

      

          
          
      

      

          
          
      

      

          
          
      

  
 

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                       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 錯誤;
               }
            });
            $("#res").click(function(){
                var $parent = $(this).parent().parent();
                $parent.find(".formtips").remove();
            });
        });

程式碼很簡單,也很易懂,朋友們直接拿走用吧,這裡就不詳細說明了。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板