1、首先引入jquery-1.3.2.js ，将其放在js文件夹下。
2、为文本框的边框定义样式文件 style.css ,放在css文件夹下，其内容如下：
.tbText
{
/*控制边框的是1px的实心红色线*/
border:1px solid red;
background-image:url(../images/tb_underline.gif);
background-repeat:repeat-x;
background-position:bottom;
}
3、编写js.js 文件，放在js文件夹下，内容如下：
$(document).ready(function() {
//页面装载完成后执行的操作
var userNode = $("#tbusername");
//找到按钮，并注册事件
$("#btnCheck").click(function() {
//获取文本框的内容
var uname = userNode.val();
//将获取到的内容发送到服务器端
if (uname == "") {
alert("用户名不能为空！");
}
else {
$.get("CheckUserName.aspx?username=" + uname, function(response) {
//接收服务器端返回的数据并显示在页面当中
$("#msg").html(response);
});
}
});
//找到文本框，并注册事件
userNode.keyup(function() {
//获取文本框的内容
var value = userNode.val();
if (value == "") {
//边框变色
userNode.addClass("tbText");
}
else {
//边框去色
userNode.removeClass("tbText");
}
});
}
);
4、输入页面Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>
<script src="jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>用户名:</td>
<td><input id="tbusername" type="text" class="tbText"/></td>
<td><span id="msg"></span></td>
<td><input id="btnCheck" type="button" value="验证" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
5、请求处理页面CheckUserName.aspx
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class CheckUserName : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string name = Request.QueryString["username"];
//Response.ClearHeaders();
//Response.Clear();
//Response.ClearContent();
//Response.ContentType = "text/plain";
Response.Write(returnResult(name));
Response.End();
}
}
public string returnResult(string name)
{
//这里为了演示，仅作简单处理，这里和数据库进行交互处理，大家都懂的，根据需要进行处理即可
string ret = string.Empty;
if (name == "admin")
{
ret = "账户[" + name + "]可以注册!";
}
else
{
ret = "账户[" + name + "]已经注册!";
}
return ret;
}
}
