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");
//邊框去色
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;
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)