Ajax表單驗證使用者名稱是否存在

來源:互聯網
上載者:User

做一個表單驗證裡面最簡單的例子,檢查使用者名稱是否存在,使用Ajax完成表單驗證的正常步驟應該是:

  1. 用戶端收集表單資訊。
  2. 使用XMLHttpRequest對象提交到伺服器。
  3. 伺服器完成驗證的邏輯,返回結果資訊。
  4. 瀏覽器端根據伺服器返回的資訊對使用者做出一定的提示。

不過由於我的空間不支援任何伺服器段語言,所以把本應在伺服器的邏輯搬到了瀏覽器,由JavaScript來做,伺服器只負責提供一個使用者名稱的列表。最後的效果如下,試著輸入test,cainiao8這些使用者名稱,都會顯示登入。

JavaScript程式碼分析

首先,當文檔載入完畢的時候,給表格設定change事件的響應函數ajaxValidate,代碼如下:

addEventSimple(window,'load',function(){
var test = document.getElementById('username');
addEventSimple(test,'change',ajaxValidate);
});

這樣,當使用者名稱文字框內的值改變之後,就會調用ajaxValidate函數,其代碼如下:

function ajaxValidate(){
var options = {
url:'ajax/ajaxUsernames.xml',
listener:callback,
method:'GET'
}
var request = createRequest(options);
request.send(null);
}

它會使用之前介紹的createRequest函數初始化一個XMLHttpRequest對象,並且將它發送到伺服器,請求ajaxUsernames.xml檔案。

最後就是callback函數了:

function callback(){
var xmlDoc = this.responseXML;
var root = xmlDoc.getElementsByTagName('root')[0];
var nodes = root.getElementsByTagName("username");
var currentNode = null;
var username = document.getElementById('username').value;
for(var i = 0; i < nodes.length; i++) {
currentNode = nodes[i];
if(username == currentNode.childNodes[0].nodeValue){
document.getElementById('test').innerHTML
= '對不起!'+username+'已經被註冊。';
return;
}
}
document.getElementById('test').innerHTML = '使用者名稱' + username +'可以使用!';
}

callback函數在已經存在的使用者名稱搜尋目前使用者輸入的名字,判斷是否已經存在。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.