快捷導(dǎo)航

jQuery簡單入門示例之用戶校驗(yàn)demo示例

更新時(shí)間：2016年07月09日 10:41:40 作者：丁國華

這篇文章主要介紹了jQuery簡單入門示例之用戶校驗(yàn)demo示例,分析了基于jQuery的簡單用戶校驗(yàn)功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery簡單入門示例之用戶校驗(yàn)。分享給大家供大家參考，具體如下：

jQuery在小編的世界中，也就是JavaScript和查詢（Query），即是輔助JavaScript開發(fā)的庫，百度百科對JQuery的介紹比較詳細(xì)，小伙伴可以東東自己可耐的小爪子，上網(wǎng)進(jìn)行搜索，說不定，有意外驚喜哦，今天這篇文章，小編簡單的介紹一下JQuery的一些基本知識，然后小編在集合實(shí)例，講解一下在具體的應(yīng)用過程中，我們的JQuery又是如何在她的舞臺熠熠生輝......

通過JQuery的學(xué)習(xí)，我們可以學(xué)到哪些知識nie，比如我們會學(xué)會JQuery的API函數(shù)的使用，以及簡單的實(shí)例的實(shí)現(xiàn)方法還有一些html、css、js的小知識，作為明星級的框架JQuery，都有誰在使用nie，比如我們熟悉的Goole、IBM、ORACLE、DELL、土豆等等，都在使用JQuery做前端的開發(fā)，我們的JQuery是不是很火爆。

介紹完了JQuery的一些基本知識以后，接下來，小編簡單來編寫一個(gè)實(shí)例---用戶名校驗(yàn)，首先，我們來分析一下這個(gè)小例子的代碼思路，首先服務(wù)器端思路分析，對指定用戶名返回用戶名已經(jīng)存在，對其他用戶名，返回用戶名可以使用；輸入：用戶名；輸出：提示信息，接著我們來編寫代碼，編寫代碼之前，小編簡單對這個(gè)小例子的目錄進(jìn)行一個(gè)簡單的描述：我們需要一個(gè)html的文件，我們?nèi)∶凶鯱serVerify，除此之外，我們需要寫css和js的文件，現(xiàn)在比較流行。遵循web標(biāo)準(zhǔn)來看，我們需要把css文件和js文件單獨(dú)放置，便于管理，我們需要分別建立css文件和js文件，除此之外，應(yīng)用當(dāng)中可能要用到圖片，所以我們單獨(dú)建立一個(gè)images文件，接著，我們開始編寫代碼：

有一個(gè)頁面文件，先來編輯html，保證內(nèi)面內(nèi)容通過html標(biāo)簽表示出來，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>JQuery實(shí)戰(zhàn)1-用戶名校驗(yàn)</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/userVerify.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/userVerify.js"></script>
  </head>
  <body>
    請輸入用戶名:<input type="text" id="userName" class="userText"/> <input type="button" value="校驗(yàn)" id="verifyButton" />
    <div id="result"></div>
  </body>
</html>

接著，在css文件目錄下建立一個(gè)css文件，編寫css的代碼：

.userText {
  /*控制文本框的邊框是紅色的實(shí)線*/
  border: 1px solid red;
  background-image: url(../images/userVerify.gif);
  background-repeat: repeat-x;
  background-position: bottom;
}

相應(yīng)的，在js中我們也要建立兩個(gè)文件，一個(gè)jquery一個(gè)userVerify，鑒于jquery的代碼較多，所以小編已經(jīng)上傳相關(guān)資源，有需要的小伙伴可以到該鏈接下載，接著，我們來編寫userVerify的代碼，來給整理頁面添加行為能力：

/*
 * 需要通過Javascript代碼來做兩件事情
 * 1.button被按下的時(shí)候，需要將文本框中的數(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() {
    //1.獲取文本框的內(nèi)容
    var userName = userNameNode.val();
    //2.將這個(gè)內(nèi)容發(fā)送給服務(wù)器端
    if (userName == "") {
      alert("用戶名不能為空");
    } else {
      $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
          //3.接收服務(wù)器端返回的數(shù)據(jù)，填充到div中
          $("#result").html(response);
        });
    }
  });
  //需要找到文本框，注冊事件
  userNameNode.keyup(function(){
    //獲取當(dāng)前文本框中的內(nèi)容
    var value = userNameNode.val();
    if (value == "") {
      //讓邊框變成紅色，并且?guī)П尘皥D
      userNameNode.addClass("userText");
    } else {
      //去掉邊框和背景圖
      userNameNode.removeClass("userText");
    }
  });
});

我們來看一下運(yùn)行效果：

小例子，小編就演示到這里，通過這個(gè)小例子，我們知道html負(fù)責(zé)頁面內(nèi)容，css負(fù)責(zé)頁面樣式，js負(fù)責(zé)頁面行為，html中應(yīng)該有doctype來告知瀏覽器的渲染顯示方式，border屬相可以控制頁面元素的邊框，background-***可以控制背景圖，以及背景圖的位置，重復(fù)顯示的方式等等，這些小知識點(diǎn)，我們都可以在這個(gè)小例子得到充分的認(rèn)識，補(bǔ)充一個(gè)小的知識點(diǎn)，發(fā)送給服務(wù)器端的數(shù)據(jù)在js中做連詞encodeURL，然后再服務(wù)器端的代碼中按UTF-8的方式做一次URLDecode，可以解決中文中的亂碼問題。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery form操作技巧匯總》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: