jquery實現一個簡單的表單驗證執行個體_jquery

表單驗證在網站開發過程中經常遇到，我們可以使用伺服器端語言驗證，也可以使用用戶端語言來驗證。本文章向大家介紹jquery用戶端驗證表單的一個簡單一實例。執行個體僅作參考。

<body><form method="post" action="">  <div class="int">    <label for="username">使用者名稱:</label>    <!-- 為每個需要的元素添加required -->    <input type="text" id="username" class="required" />  </div>  <div class="int">    <label for="email">郵箱:</label>    <input type="text" id="email" class="required" />  </div>  <div class="int">    <label for="personinfo">設定檔:</label>    <input type="text" id="personinfo" />  </div>  <div class="sub">    <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>  </div></form></body><script src="/Public/js/jquery-1.7.1.min.js"></script><script type="text/javascript">//<![CDATA[$(function(){    /*    *思路大概是先為每一個required添加必填的標記，用each()方法來實現。    *在each()方法中先是建立一個元素。然後通過append()方法將建立的元素加入到父元素後面。    *這裡面的this用的很精髓，每一次的this都對應著相應的input元素，然後擷取相應的父元素。    *然後為input元素添加失去焦時間點事件。然後進行使用者名稱、郵件的驗證。    *這裡用了一個判斷is()，如果是使用者名稱，做相應的處理，如果是郵件做相應的驗證。    *在jQuery架構中，也可以適當的穿插一寫原汁原味的javascript代碼。比如驗證使用者名稱中就有this.value，和this.value.length。對內容進行判斷。    *然後進行的是郵件的驗證，貌似用到了Regex。    *然後為input元素添加keyup事件與focus事件。就是在keyup時也要做一下驗證，調用blur事件就行了。用triggerHandler()觸發器，觸發相應的事件。    *最後提交表單時做統一驗證    *做好整體與細節的處理    */    //如果是必填的，則加紅星標識.    $("form :input.required").each(function(){      var $required = $("<strong class='high'> *</strong>"); //建立元素      $(this).parent().append($required); //然後將它追加到文檔中    });     //文字框失去焦點後    $('form :input').blur(function(){       var $parent = $(this).parent();       $parent.find(".formtips").remove();       //驗證使用者名稱       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>');        }       }    }).keyup(function(){      $(this).triggerHandler("blur");    }).focus(function(){       $(this).triggerHandler("blur");    });//end blur        //提交，最終驗證。     $('#send').click(function(){        $("form :input.required").trigger('blur');        var numError = $('form .onError').length;        if(numError){          return false;        }         alert("註冊成功,密碼已發到你的郵箱,請查收.");     });    //重設     $('#res').click(function(){        $(".formtips").remove();      });})//]]></script>

以上這篇jquery實現一個簡單的表單驗證執行個體就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援雲棲社區。