JQuery實戰第一講：驗證使用者名是否可用！

JQuery驗證使用者名是否可用！

使用JQuery好久了，但每次都是現用現查，或者找些相關的插件。從來沒系統的學習過。本身對JavaScript就有一種莫明的懼怕，雖然每次都認真的看，但有些東西總是記不住。似乎大腦就不記這些相關的東西，最近抽出點時間把《JQuery基礎》看完了，看的時候很清楚，代碼讀的也不錯。就是過階段在用時又忘記了。是不是老了，我才26啊。現在正在看《JQuery in Action》雖然是英文版，但看起來還是不錯。無意間在網上看到王興魁老師講的JQuery實站視訊。豁然開朗，思路也比較清晰。将視訊中講到的執行個體通過文字的形式再次表現。隻為以後查詢之用。由于本人不善于言辭。固通過代碼加注釋的方式展式。

Demo名稱：驗證注冊使用者名是否可用

實作思路：1、當Button按鈕被按下時，需要将文本框中的資料擷取到，并發送到伺服器端，最後接受伺服器傳回的資料。填充到預留的div中，顯示結果。

2、文本框中當有按鍵按下之後，需要判斷文本框中的内容是否為空。如果不為空，紅色的邊框和背景圖就取消，否則保留。

寫程式關鍵是思路，隻要思路正确，無論你用什麼技術都可以去實作。這就是為什麼說寫程式之前要多想而不是拿過來就寫。有了上述思路後，我們首先進行第一步：頁面的設計

                      圖1

如圖1所示，實作上述效果并不難，首先，我們建立TestDemo.aspx檔案。關在此檔案的html檔案中實作上述效果，代碼如下：

代碼 < body >

     < form id = " form1 "  runat = " server " >

      < div >

        使用者名： < input type = " text "  id = " txtUserName "   class = " userText "   />

                < input type = " button "  id = " btnSubmit "  value = " 驗證 "   />

       </ div >

      < div id = " msg " >   </ div >

     </ form >

</ body >

在頁面上添加上述功能後，似乎效果并沒有如預期的一樣，我們還需要通過CSS樣式對TextBox的樣式進行處理，實作思路：

1、将TextBox的邊框設為1px并将顔色設為紅色。

2、浪線用一幅背景圖檔，并将圖檔的位置控制在下端顯示。

3、html中添加如下代碼引入樣式

< link rel = " Stylesheet "  href = " Css/testCss.css "  type = " text/css "  media = " screen "   />

建立testCss.css樣式檔案：

代碼 .userText{

    border:1px solid red;

    background - image:url(.. / Images / background.jpg);

    background - repeat:repeat - x;

    background - position:bottom;

}

上述檔案完成後，編譯運作即可出現如圖1的效果。按照既定思路，進一步完善驗證功能。

1、 首先在html中引入JQuery.js檔案引入所需要的類庫，并建立vailty.js檔案，用于編寫JQuery相關代碼。

代碼 < script type = " text/javascript "  src = " JScript/jquery.js " ></ script >

< script type = " text/javascript " src = " JScript/TestJS/IntellisenseDemo.js " ></ script >

< script type = " text/javascript "  src = " JScript/TestJS/vailty.js " ></ script >

Vailty.js代碼如下：

代碼 // 需要在頁面裝載完成後注冊這些工作

$(document).ready(function() {

     // 這裡面的内容就是頁面裝載完成後需要執行的代碼

     // 需要找到button按鈕，注冊事件

    var userNameVal  =  $( " #txtUserName " );

     // 先找到某個結點，在去執行操作

    $( " #btnSubmit " ).click(function() {

         // 1、擷取文本框的内容

        var userName  =  userNameVal.val();

         // 2、将這個内容發送給伺服器端

         if  (userName  ==   "" ) {

            alert( " 使用者名不能為空！ " );

        }  else  { // get想關參數請參考JQuery API

            $. get ( " DefaultVerify.aspx?userName= "   +  userName,  null , function(response) {

                 // 3、接收伺服器端傳回的資料，填充到div中

                $( " #msg " ).html(response);

            });

        }

    });

     // 需要長到文本框注冊事件

    userNameVal.keyup(function() {

         // 擷取目前文本框中的内容

        var value  =  userNameVal.val();

         if  (value  ==   "" ) {

             // 讓邊框變成紅色，并且帶有背景圖

            userNameVal.addClass( " userText " );

        }

         else  {

             // 去掉邊框紅色及背景圖

            $( this ).removeClass( " userText " );

        }

    });

});

按照我們當初的思路，上述代已經滿足了我們的要求，由于我是在ASP.NET平台下開發，是以我們還需要建立一個檔案DefualtVerity.aspx檔案，用以處理伺服器的想關請求，這裡我們隻寫一些象征性的代碼。完善功能。在DefualtVerity.aspx的Page_load中加入如下代碼

代碼         string  userName  =  Request.QueryString[ " userName " ].ToString();

         if  (userName  ==   " mzoy " )

        {

            Response.Write( " 使用者名已經存在！ " );

        }

         else

        {

            Response.Write( " 您可以使用此使用者名！ " );

        }

此處如果您想擴充，就在此處加些通路資料庫的一些相關操作。

      這樣，一個利用JQuery來實作的，具有驗證功能的程式就寫完了，雖然很簡單，但對于了解JQuery的代碼還是有一定幫助的。分别在IE7及Firefox中測試通過。測度過程中建議大家安裝多個浏覽器進行測試。同時，如果想深入學習JS安裝Firebug元件是很有必要的。它不僅可以幫助我們進行斷點調式，對于了解JQuery中的選擇器及DOM的概念很有幫助。具體操作方法請參考Javascript調試利器：Firebug使用詳解

作者：mzoyLee

出處：http://blog.csdn.net/mzoy

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。