JQuery實作使用者名稱無刷新驗證的小範例_jquery

1.在靜態頁面中加入文字方塊及樣式和js腳本的引用：

複製程式碼 程式碼如下:

Code highlighting produced by Acti/ /www.jb51.net/-->


   
   
   
   


   

   

  =  "txtName" type="text" class ="txtName" />
       

   

 >

2.css樣式表，當文字方塊文字為空時邊框紅色：

複製程式碼 程式碼如下:

.txtName
{{ red solid;   
}

3.js腳本：當文字方塊文字為空時邊框紅色；如果使用者名稱為janes,則提示“使用者名稱已經存在”，否則提示“使用者名稱可以使用”。

複製程式碼 程式碼如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.jb51.net/-->$(function(){var txtname=$("#txtName");

//輸入文字時文字方塊樣式
txtname.keyup(function(){
var name=$(this).val();
if(name=="")
    $(this) .addClass("txtName");
    else $(this).removeClass("txtName");
})
//失去焦點時驗證使用者名稱是否可用
$("#txtName ").blur(function()
{
  var name=$(this).val();
  $.get("validator1.aspx?name=" name,null,function(response) {
  $("#result").html(response);
  })

})

})

4..aspx及.cs頁面程式碼，用來驗證使用者名稱是否可用，以傳回結果。

複製程式碼 程式碼如下:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.jb51.net/-->public partial class Validator_validator1 : System.Web.UI.Page{

  , EventArgs e)
    {
            string name = Request.QueryString["name"].ToString();                Response.Write("該使用者名已經存在！ >