jQuery實現(xiàn)驗證用戶登錄

更新時間：2019年12月10日 16:11:56 作者：羅俊-Everns

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)驗證用戶登錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

前言

前面的博客對jQuery有所介紹，所以接下來的這幾篇博客是對jQuery的介紹，具體介紹方式是用例子呈現(xiàn)給大家。

內(nèi)容

顯示效果

輸入之前

輸入之后點(diǎ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ā)送給服務(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");
  }
 });
});

大神們一看代碼就立馬知道，上面代碼中的知識點(diǎn)有那些，我在這里總結(jié)了一小部分，希望大神能提出一些寶貴的意見。

總結(jié)

HTML負(fù)責(zé)頁面內(nèi)容，CSS負(fù)責(zé)頁面樣式，JavaScript負(fù)責(zé)頁面行為

HTML知識點(diǎn):

HTML中應(yīng)該有DOCTYPE來告知瀏覽器的渲染顯示方式。
可以先定義div或span節(jié)點(diǎn)用于以后顯示服務(wù)器返回數(shù)據(jù)。

CSS知識點(diǎn):

border屬性可以控制頁面元素的邊框。
background-*可以控制背景圖，以及背景圖的位置，重復(fù)顯示的方式。
可以通過#idname或 .classname的方式來個指定的html節(jié)點(diǎn)定義樣式。

JavaScript知識點(diǎn):

可以通過#idname或 .classname的方式來個指定的html節(jié)點(diǎn)定義樣式。
可以通過$(document).ready(function(){})的方式來定義頁面裝載完成時，需要執(zhí)行的方法。
可以通過$()方法來獲得頁面的指定節(jié)點(diǎn)，參數(shù)是某種css的選擇器。
可以在$()方法返回的jQuery對象上執(zhí)行各種jQuery的方法來獲取數(shù)據(jù)，定義事件，執(zhí)行操作。
val()方法可以獲得節(jié)點(diǎn)的value屬性值。
html()方法可以設(shè)定某個節(jié)點(diǎn)中的html內(nèi)容。
click()方法可以響應(yīng)鼠標(biāo)點(diǎn)擊事件。
keyup()方法可以響應(yīng)鍵盤彈起的事件。
$.get()方法可以和服務(wù)器端進(jìn)行g(shù)et方式的交互，注冊的callback方法會再數(shù)據(jù)回來的時候被調(diào)用，這個方法會接收到代表服務(wù)器端返回數(shù)據(jù)的一個純文本的參數(shù)。
addClass()removeClass()方法可以給某個節(jié)點(diǎn)添加或刪除一個class。
發(fā)送給服務(wù)器端的數(shù)據(jù)在JavaScript中做的兩次encodeURL，然后在服務(wù)器端的代碼中按UTF-8的方式做一次URLDecode，可以解決中文亂碼問題。