jQuery實現(xiàn)驗證用戶登錄
更新時間：2019年12月10日 16:11:56 作者：羅俊-Everns
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)驗證用戶登錄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
前面的博客對jQuery有所介紹，所以接下來的這幾篇博客是對jQuery的介紹，具體介紹方式是用例子呈現(xiàn)給大家。
內容
顯示效果
輸入之前
輸入之后點擊校驗
廢話少說，先上代碼：
HTML代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery實戰(zhàn)1-用戶名校驗</title> <script src="script/jquery-1.8.2.js"></script> <script src="script/userVerify.js"></script> <link href="CSS/jQuery1CSS.css" rel="stylesheet" /> </head> <body> 請輸入用戶名：<input type="text" id="userName" class="userText" /> <input type="button" name="校驗" value="校驗" id="verifyButton" /> <div id="result"> </div> </body> </html>
CSS代碼：
.userText {
border:1px solid #f00;
background-image:url(D:\js\驗證用戶名\驗證用戶名\img\userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}
JavaScript代碼：
//需要通過JavaScript代碼來做的兩件事情
//1.button被按下的時候，需要將文本框中的數(shù)據(jù)獲取到，然后發(fā)送給服務器端，最后接收服務器返回的數(shù)據(jù)，填充到我們預留的div中，這樣用戶就可以看到結果
//2.文本框上，用戶按鍵之后，需要判斷文本框中的內容是否為空，如果不為空，紅色的邊框和背景圖就應該取消，否則保留
//需要在頁面中完成注冊上的這些工作
$(document).ready(function () {
//這里面的內容就是頁面裝載完成后需要執(zhí)行的代碼
var userNameNode = $("#userName");
//需要找到button按鈕，注冊事件
$("#verifyButton").click(function () {
//獲取文本框的內容
var userName = userNameNode.val();
//將這個內容發(fā)送給服務器端
if (userName == "") {
alert("用戶名不能為空");
} else {
$.get("http://127.0.0.1:8080/jQuery/UserVerify?userName = " + encodeURI(encodeURI(userName)),userName, null, function (response) {
//接收服務器端返回的數(shù)據(jù)，填充到div中
$("#result").html(response);
});
}
});
//需要找到文本框，注冊事件
userNameNode.keyup(function () {
var value = userNameNode.val();
if (value == "") {
//讓邊框變成紅色，并且?guī)П尘皥D
userNameNode.addClass("userText");
}else{
//去掉邊框和背景圖
userNameNode.removeClass("userText");
}
});
});
大神們一看代碼就立馬知道，上面代碼中的知識點有那些，我在這里總結了一小部分，希望大神能提出一些寶貴的意見。
總結
HTML負責頁面內容，CSS負責頁面樣式，JavaScript負責頁面行為
HTML知識點:
- HTML中應該有DOCTYPE來告知瀏覽器的渲染顯示方式。
- 可以先定義div或span節(jié)點用于以后顯示服務器返回數(shù)據(jù)。
CSS知識點:
- border屬性可以控制頁面元素的邊框。
- background-*可以控制背景圖，以及背景圖的位置，重復顯示的方式。
- 可以通過#idname或 .classname的方式來個指定的html節(jié)點定義樣式。
JavaScript知識點:
- 可以通過#idname或 .classname的方式來個指定的html節(jié)點定義樣式。
- 可以通過$(document).ready(function(){})的方式來定義頁面裝載完成時，需要執(zhí)行的方法。
- 可以通過$()方法來獲得頁面的指定節(jié)點，參數(shù)是某種css的選擇器。
- 可以在$()方法返回的jQuery對象上執(zhí)行各種jQuery的方法來獲取數(shù)據(jù)，定義事件，執(zhí)行操作。
- val()方法可以獲得節(jié)點的value屬性值。
- html()方法可以設定某個節(jié)點中的html內容。
- click()方法可以響應鼠標點擊事件。
- keyup()方法可以響應鍵盤彈起的事件。
- $.get()方法可以和服務器端進行get方式的交互，注冊的callback方法會再數(shù)據(jù)回來的時候被調用，這個方法會接收到代表服務器端返回數(shù)據(jù)的一個純文本的參數(shù)。
- addClass()removeClass()方法可以給某個節(jié)點添加或刪除一個class。
- 發(fā)送給服務器端的數(shù)據(jù)在JavaScript中做的兩次encodeURL，然后在服務器端的代碼中按UTF-8的方式做一次URLDecode，可以解決中文亂碼問題。
end
謝謝您的閱讀！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要給大家匯總介紹了了jQuery獲取頁面及個元素高度、寬度的方法，非常的實用，有需要的小伙伴可以參考下。下面的例子是基于jquery的參數(shù)與方法來快速獲取文檔或瀏覽器可視區(qū)域的高度與寬度的代碼,希望本例子能給你帶來一些幫助。2016-01-01
下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡單實例(精簡濃縮版)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery實現(xiàn)限制textarea輸入字數(shù)的方法
這篇文章主要為大家詳細介紹了jquery實現(xiàn)限制textarea輸入字數(shù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章介紹了使用Jquery操作Cookies的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-05-05
EasyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼
今天做項目的時候，想在easyui的datagrid每一列數(shù)據(jù)后邊都加上一個操作按鈕，怎么實現(xiàn)此功能呢？下面小編給大家?guī)砹薊asyUI的DataGrid每行數(shù)據(jù)添加操作按鈕的實現(xiàn)代碼，需要的朋友參考下吧2017-08-08
jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實現(xiàn)簡單的球體斜拋及顏色動態(tài)變換效果,通過jQuery+html5的canvas利用時間函數(shù)進行實時數(shù)學運算動態(tài)繪制拋物線圖形的技巧,需要的朋友可以參考下2016-01-01
jquery插件splitScren實現(xiàn)頁面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實現(xiàn)頁面分屏切換模板特效的相關資料,需要的朋友可以參考下2015-06-06
:first：獲取第一個元素，在一些特殊情況下還是蠻實用的，下面為大家詳細介紹下:first的具體使用，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了jquery html5 視頻播放控制代碼,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了jQuery 特性操作詳解的相關資料,并附實例代碼，需要的朋友可以參考下2016-09-09