下面實現一個經典的登錄頁面，有保存密碼功能，頁面上所有的控件都是html控件，沒有服務器控件
1，新建一名為login.htm的靜態網頁文件，作為登錄頁面，如圖
body標簽代碼
復制代碼 代碼如下:
<body onkeydown ="enterLogin()"> <!--添加按下鍵盤事件-->
<div>
<table cellpadding="1">
<tr>
<td
valign="middle">
用戶名：</td>
<td valign="middle">
<input type="text" onblur ="checkuser()" /></td>
<td
valign="middle"><img src="" id ="imgCheck" style = "visibility :hidden; "/ ><span id ="unMessage">
</span></td>
</tr>
<tr>
<td
valign="middle">
密碼：</td>
<td valign="middle">
<input type="password" /></td>
<td
valign="middle"><span id ="pwdMessage"></span>
</td>
</tr>
<tr>
<td colspan="3" valign="middle">
<input type="checkbox" />記住密碼一個月</td>
</tr>
<tr>
<td colspan="3" valign="middle">
<input type="button" value="登錄" onclick ="login()" />
<input type="button" value="重置" onclick ="reset()" /></td>
</tr>
</table>
</div>
</body>
2，在login.htm中引入外部js代碼
其中aj.js為ajax封裝的類，loginCookie.js為對Cookie操作的代碼
aj.js代碼如下
loginCookie.js代碼如下
3，寫login.htm頁面中的js代碼，放在head標簽之間
4，新建一名為login.aspx的頁面，該頁面作為ajax請求的頁面，login.aspx.cs代碼如下
5，新建一名為loginIndex.htm的靜態頁面，作為用戶登錄之后的首頁
其body標簽代碼如下
6，在loginIndex.htm頁面引入loginCookie.js文件
7，寫loginIdex.htm頁面的js代碼，放在head標簽之間
8，完成，客戶端代碼較多，但是交互性很好
演示如下：
當輸入完用戶名，鼠標光標離開用戶名框之后，系統會快速檢驗用戶名是否合法
進入首頁后，出現的窗口，帶有當前登錄的用戶和注銷按鈕
當用戶點擊注銷按鈕時，會友情提示你是否真的注銷
當你不是輸入用戶和密碼登陸，也是直接在瀏覽器地址欄中輸入首頁網址的時候，系統會提示你沒有登錄，并直接返回到登陸頁面。
當用戶輸入了有效的用戶名和密碼，并要求系統記住密碼，用戶下次進入到登錄頁面時，系統會把上次記住的用戶名和密碼顯示在輸入框中。。
并且這個時候直接在瀏覽器的地址欄中輸入首頁地址，也是能正常訪問的。
4，新建一名為login.aspx的頁面，該頁面作為ajax請求的頁面，login.aspx.cs代碼如下
5，新建一名為loginIndex.htm的靜態頁面，作為用戶登錄之后的首頁
其body標簽代碼如下
6，在loginIndex.htm頁面引入loginCookie.js文件
7，寫loginIdex.htm頁面的js代碼，放在head標簽之間
8，完成，客戶端代碼較多，但是交互性很好
演示如下：
當輸入完用戶名，鼠標光標離開用戶名框之后，系統會快速檢驗用戶名是否合法
進入首頁后，出現的窗口，帶有當前登錄的用戶和注銷按鈕
當用戶點擊注銷按鈕時，會友情提示你是否真的注銷
當你不是輸入用戶和密碼登陸，也是直接在瀏覽器地址欄中輸入首頁網址的時候，系統會提示你沒有登錄，并直接返回到登陸頁面。
當用戶輸入了有效的用戶名和密碼，并要求系統記住密碼，用戶下次進入到登錄頁面時，系統會把上次記住的用戶名和密碼顯示在輸入框中。。
并且這個時候直接在瀏覽器的地址欄中輸入首頁地址，也是能正常訪問的。
新聞熱點
疑難解答
圖片精選
