jquery實(shí)現(xiàn)簡單的表單驗(yàn)證

更新時(shí)間：2015年11月17日 14:37:15 投稿：lijiao

這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的表單驗(yàn)證，思路大概是先為每一個(gè)required添加必填的標(biāo)記，用each()方法來實(shí)現(xiàn)，感興趣的小伙伴們可以參考一下

jquery如何實(shí)現(xiàn)簡單的表單驗(yàn)證，我們先跟大家分享一下實(shí)現(xiàn)思路。

大概思路:
先為每一個(gè)required添加必填的標(biāo)記，用each()方法來實(shí)現(xiàn)。
在each()方法中先是創(chuàng)建一個(gè)元素，然后通過append()方法將創(chuàng)建的元素加入到父元素后面。
這里面的this用的很精髓，每一次的this都對(duì)應(yīng)著相應(yīng)的input元素，然后獲取相應(yīng)的父元素。
然后為input元素添加失去焦點(diǎn)事件。然后進(jìn)行用戶名、郵件的驗(yàn)證。
這里用了一個(gè)判斷is()，如果是用戶名，做相應(yīng)的處理，如果是郵件做相應(yīng)的驗(yàn)證。
在jQuery框架中，也可以適當(dāng)?shù)拇┎逡粚懺兜膉avascript代碼。比如驗(yàn)證用戶名中就有this.value，和this.value.length。對(duì)內(nèi)容進(jìn)行判斷。
然后進(jìn)行的是郵件的驗(yàn)證，用到了正則表達(dá)式。
然后為input元素添加keyup事件與focus事件，就是在keyup時(shí)也要做一下驗(yàn)證，調(diào)用blur事件就行了。用triggerHandler()觸發(fā)器，觸發(fā)相應(yīng)的事件。
最后提交表單時(shí)做統(tǒng)一驗(yàn)證，做好整體與細(xì)節(jié)的處理。
如果是必填的，則加紅星標(biāo)識(shí)。

jQuery部分：

<script type="text/javascript">
//<![CDATA[
$(function(){  
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //創(chuàng)建元素
   $(this).parent().append($required); //然后將它追加到文檔中
  });
   //文本框失去焦點(diǎn)后
  $('form :input').blur(function(){
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    //驗(yàn)證用戶名
    if( $(this).is('#username') ){
     if( this.value=="" || this.value.length < 6 ){
      var errorMsg = '請(qǐng)輸入至少6位的用戶名.';
      $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
     }else{
      var okMsg = '輸入正確.';
      $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
     }
    }
    //驗(yàn)證郵件
    if( $(this).is('#email') ){
    if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
      var errorMsg = '請(qǐng)輸入正確的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

  
  //提交，最終驗(yàn)證。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注冊(cè)成功,密碼已發(fā)到你的郵箱,請(qǐng)查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

html部分：

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用戶名:</label>
  <!-- 為每個(gè)需要的元素添加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">個(gè)人資料:</label>
  <input type="text" id="personinfo" />
 </div>
 <div class="sub">
  <input type="submit" value="提交" id="send"/><input type="reset" id="res"/>
 </div>
</form>

</body>

以上就是jquery實(shí)現(xiàn)簡單的表單驗(yàn)證的關(guān)鍵代碼，希望對(duì)大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: