jQuery實現的表單註冊驗證程式碼例項

admin發表於2017-02-24
jQuery

表單註冊和登陸一般都會有驗證功能，否則可能會輸入一些非法的字元給網站帶來威脅，或者說填寫內容格式錯誤，導致使用者填寫的內容出現失誤，比如郵箱有可能輸錯或者說兩次輸入的密碼不一致等等，總之進行表單驗證的好處多多，否則可能出現意想不到的麻煩，下面是一段簡單的表單註冊程式碼例項，希望能夠給大家帶來一定的幫助，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" />
<title>登錄檔單驗證例項程式碼-螞蟻部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
  $(":input.required").each(function(){ 
    var $required=$("<strong>*</strong>"); 
    $(this).parent().append($required); 
  }); 
  $(":input.required").blur(function(){ 
    if($(this).is("#username")){ 
      $(".formtip").remove(); 
      if(this.value==""||this.value.length<6){ 
       var errMsg="<span class='formtip'>使用者名稱至少是6個字母</span>"; 
       $(this).parent().append(errMsg); 
     }
     else{ 
       var msg="<span class='formtip'>使用者名稱可以使用</span>"; 
       $(this).parent().append(msg); 
     } 
   } 
   if($(this).is("#email")){ 
     $(".emailtip").remove(); 
     var reg = /^\w{1,}@\w+\.\w+$/; 
     var $email=$("#email").val(); 
     if(!reg.test($email)){ 
       var errMsg="<span class='emailtip'>郵箱不合法</span>"; 
       $(this).parent().append(errMsg); 
     }
     else{ 
       var Msg="<span class='emailtip'>郵箱可以使用</span>"; 
       $(this).parent().append(Msg); 
     } 
   } 
})
}) 
</script> 
</head> 
<body> 
<form action="#" method="post"> 
<div class="int">姓名:<input type="text" name="username" id="username" class="required"/></div> 
<div class="int">郵箱:<input type="text" id="email" class="required"/></div> 
<div class="int">資料:<input type="text" id="personInfo" class="required"/></div> 
<input type="submit" value="提交" id="send"/><input type="reset" id="res"/> 
</form> 
</body> 
</html>

以上程式碼實現了簡單的表單驗證功能，下面簡單介紹一下實現過程。

一.實現原理:

原理比較簡單，我們們這裡就直說主要部分，為文字框註冊blur事件處理函式，當文字框失去焦點的時候，就會進行相應的驗證，並給出相應的提示，這裡就不多說了，具體可以參閱程式碼註釋。

二.程式碼註釋:

1.$(function(){})，當文件結構完全載入完畢再去執行函式中的程式碼。

2.$(":input.required").each(function(){}),遍歷一每一個匹配的元素，並以匹配元素作為上下文去執行函式。

3.var $required=$("<strong>*</strong>")，建立一個物件。

4.$(this).parent().append($required)，為input元素的父元素也就是div的內部的尾部新增$required。

5.$(":input.required").blur(function(){})，為具有class屬性值為required的input元素註冊blur事件處理函式。

6.if($(this).is("#username"))，判斷當期啊元素是否是輸入姓名的文字框。

7.$(".formtip").remove()，移除class屬性值為formtip的節點，之所以一開始就要移除為了防止之前的提示和當前提示一起出現。

8.if(this.value==""||this.value.length<6)，如果輸入姓名文字框的內容為空或者長度小於6.

9.var errMsg="<span class='formtip'>使用者名稱至少是6個字母</span>"，宣告一個字串。

10.$(this).parent().append(errMsg)，為當前元素的父元素也就是div的內部的後部新增上面宣告的字串。

三.相關閱讀:

1.each()函式可以參閱jQuery each()一章節。

2..parent()函式可以參閱jQuery parent()一章節。

3.append()函式可以參閱jQuery append()一章節。

4.blur事件可以參閱jQuery blur事件一章節。

5.is()函式可以參閱jQuery is()一章節。

6.remove()函式可以參閱jQuery remove()一章節。

相關文章