UserVerify.aspx頁面代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserVerify.aspx.cs" Inherits="Web.One.UserVerify" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>JQuery實戰-用戶名校驗</title>
<link href="../CSS/Css.css" rel="stylesheet" type="text/css" />
<script src="../JavaScript/jquery-1.2.6-intellisense.js" type="text/javascript"></script>
<script src="../JavaScript/JQuery.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
請輸入用戶名：<input type="text" id="userName" class="userText" /> <input type="button" value="校驗" id="verifyButton"/>
<div id="result">
</div>
</form>
</body>
</html>
CheckUser.aspx.cs代碼:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using BLL;
using Model;
namespace Web.One
{
public partial class CheckUser : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string name = Request.QueryString["userName"];
if (name == "")
{
Response.Write("用戶名不能爲空");
}
//UserManager.getUserByName(name):根據用戶名查詢該用戶是否存在,返回User對象,Name是User的屬性
else if (UserManager.getUserByName(name).Name != null)
{
Response.Write("用戶["+ name+"]已經註冊");
}
else
{
Response.Write("用戶["+name+"]可以註冊");
}
}
}
}
JQuery.js代碼:
*需要通過javascript代碼來做兩件事情
*1.button被按下的時候，需要將文本框中的數據獲取到，然後發送給服務器端，最後接受服務器返回的數據，填充到我們預留的div中，
這樣用到就可以看到結果
*2.文本框上，用戶按鍵之後，需要判斷文本框中的內容是否爲空，如果不爲空，紅色的邊框和背景圖就應該取消，否則保留
**/
/*
*需要在頁面裝載完成是註冊上這些工作
**/
/*
$(document ).ready(function(){
//這裏面的內容就是頁面裝載完成後需要執行的代碼
//需要找到button按鈕,註冊事件
$("#verifyButton").click(function (){
//1.獲取文本框的內容
var userName = $("#userName").val(); //val可以獲取到文本框中的值
//2.將這個內容發送給服務器端
if(userName == ""){
alert ("用戶名不能爲空");
}else {
$.get("CheckUser.aspx?userName="+decodeURI(decodeURI(userName)),null,function(response){
//3.接收服務器返回的數據,填充到div中
$("#result").html(response);
});
}
});
//需要找到文本框,註冊事件
$("#userName").keyup(function(){
//獲取當前文本框中的內容
var value = $(this).val();
if(value == ""){
//讓邊框變成紅色,並且帶背景圖
$(this).addClass("userText");
}else{
//去掉邊框和背景圖
$(this).removeClass("userText");
}
});
});