這篇文章將為大家詳細講解有關(guān)jQuery如何實現(xiàn)驗證用戶登錄,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
目前累計服務(wù)客戶上千多家,積累了豐富的產(chǎn)品開發(fā)及服務(wù)經(jīng)驗。以網(wǎng)站設(shè)計水平和技術(shù)實力,樹立企業(yè)形象,為客戶提供網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)站策劃、網(wǎng)頁設(shè)計、網(wǎng)絡(luò)營銷、VI設(shè)計、網(wǎng)站改版、漏洞修補等服務(wù)。成都創(chuàng)新互聯(lián)始終以務(wù)實、誠信為根本,不斷創(chuàng)新和提高建站品質(zhì),通過對領(lǐng)先技術(shù)的掌握、對創(chuàng)意設(shè)計的研究、對客戶形象的視覺傳遞、對應(yīng)用系統(tǒng)的結(jié)合,為客戶提供更好的一站式互聯(lián)網(wǎng)解決方案,攜手廣大客戶,共同發(fā)展進步。
內(nèi)容
顯示效果
輸入之前
輸入之后點擊校驗
廢話少說,先上代碼:
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ā)送給服務(wù)器端,最后接收服務(wù)器返回的數(shù)據(jù),填充到我們預(yù)留的div中,這樣用戶就可以看到結(jié)果 //2.文本框上,用戶按鍵之后,需要判斷文本框中的內(nèi)容是否為空,如果不為空,紅色的邊框和背景圖就應(yīng)該取消,否則保留 //需要在頁面中完成注冊上的這些工作 $(document).ready(function () { //這里面的內(nèi)容就是頁面裝載完成后需要執(zhí)行的代碼 var userNameNode = $("#userName"); //需要找到button按鈕,注冊事件 $("#verifyButton").click(function () { //獲取文本框的內(nèi)容 var userName = userNameNode.val(); //將這個內(nèi)容發(fā)送給服務(wù)器端 if (userName == "") { alert("用戶名不能為空"); } else { $.get("http://127.0.0.1:8080/jQuery/UserVerify?userName = " + encodeURI(encodeURI(userName)),userName, null, function (response) { //接收服務(wù)器端返回的數(shù)據(jù),填充到div中 $("#result").html(response); }); } }); //需要找到文本框,注冊事件 userNameNode.keyup(function () { var value = userNameNode.val(); if (value == "") { //讓邊框變成紅色,并且?guī)П尘皥D userNameNode.addClass("userText"); }else{ //去掉邊框和背景圖 userNameNode.removeClass("userText"); } }); });
大神們一看代碼就立馬知道,上面代碼中的知識點有那些,我在這里總結(jié)了一小部分,希望大神能提出一些寶貴的意見。
總結(jié)
HTML負責頁面內(nèi)容,CSS負責頁面樣式,JavaScript負責頁面行為
HTML知識點:
HTML中應(yīng)該有DOCTYPE來告知瀏覽器的渲染顯示方式。
可以先定義div或span節(jié)點用于以后顯示服務(wù)器返回數(shù)據(jù)。
CSS知識點:
border屬性可以控制頁面元素的邊框。
background-*可以控制背景圖,以及背景圖的位置,重復(fù)顯示的方式。
可以通過#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()方法可以設(shè)定某個節(jié)點中的html內(nèi)容。
click()方法可以響應(yīng)鼠標點擊事件。
keyup()方法可以響應(yīng)鍵盤彈起的事件。
$.get()方法可以和服務(wù)器端進行g(shù)et方式的交互,注冊的callback方法會再數(shù)據(jù)回來的時候被調(diào)用,這個方法會接收到代表服務(wù)器端返回數(shù)據(jù)的一個純文本的參數(shù)。
addClass()removeClass()方法可以給某個節(jié)點添加或刪除一個class。
發(fā)送給服務(wù)器端的數(shù)據(jù)在JavaScript中做的兩次encodeURL,然后在服務(wù)器端的代碼中按UTF-8的方式做一次URLDecode,可以解決中文亂碼問題。
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
關(guān)于“jQuery如何實現(xiàn)驗證用戶登錄”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
當前名稱:jQuery如何實現(xiàn)驗證用戶登錄
網(wǎng)站URL:http://bm7419.com/article40/jcsoho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、網(wǎng)頁設(shè)計公司、網(wǎng)站排名、手機網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)