什麼是創建AJAX用戶名驗證處理程序的最佳方法？

我正在開發一個社交網站，並用一些吐出和擦亮來改進前端。什麼是創建AJAX用戶名驗證處理程序的最佳方法？

一個我實施的改進是一個AJAX驗證聊天的名字。該設置是這樣的：

觀衆首長註冊頁面，訪問者類型自己想要的聊天名字到現場。雖然打字，爲用戶提供了即時的反饋到聊天名稱是否已在使用中，含有非法字符，長度錯誤等

我得到這個工作：我已經建立了一個簡單的PHP腳本充當一個綁定到我的輸入的onkeyup和blur事件的AJAX處理程序。但是，每個請求都涉及一個數據庫查詢，這個查詢不會很好。

我的問題是：我如何簡化這個？當然每個onkeyup或blur上的數據庫查詢不是一個好主意嗎？

來源

2010-11-05 Martin Bean

我推薦以下（基於時間的）戰略：

KEYUP火災
取消超時（如果已在運行的時候）
開始一個新的超時（500 - 1000毫秒）
執行請求時，超時

這樣你可以做一個請求，每次用戶停止鍵入至少500 - 1000 女士。這可以在用戶仍在鍵入時爲您節省一些請求。當模糊事件被觸發時，您可以立即開始請求，因爲用戶顯然不再打字。

例（使用jQuery）與500毫秒：

var timeout = null; 

var stopTimeout = function() { 
    // step 2: stop running timeout 
    if (timeout !== null) { 
     clearTimeout(timeout); 
     timeout = null; 
    } 
}; 

var doRequest = function() { 
    // step 4: do request 
}; 

// step 1: event fires 
$('input').keyup(function() { 
    stopTimeout(); 
    // step 3: start new timeout 
    timeout = setTimeout(doRequest, 500); 
}).blur(function() { 
    stopTimeout(); 
    doRequest(); 
});

正如其他人指出，檢查無效字符等，應做的客戶端以及服務器端的，因爲你不能信任客戶端。

來源

2010-11-05 10:22:38 jwueller

大，既有很好的答案！我現在衝突了，哈哈... – 2010-11-05 10:29:33

謝謝，@elusive。我設法寫我自己的（在我的答案中）。 – 2010-11-05 10:54:39

檢查有效的用戶名是因爲它會需要到你的數據庫的唯一途徑。我建議將檢查無效字符的邏輯放入JavaScript中，然後僅檢查可用且有效的用戶名稱onblur，這樣，每次用戶單擊字段時只需發出一個請求。

當然，儘管把你的驗證入JS，你還是應該檢查它在PHP

來源

2010-11-05 10:23:15 Ashley

偉大的，兩個很好的答案！我現在發生衝突，哈哈... – 2010-11-05 10:33:42

所有的驗證（非法字符，長度等），應在客戶端完成，不應需要運行服務器端直到表單被提交。

檢查用戶名可以通過AJAX進行實時。除非你有一臺非常慢的服務器或大量的用戶，否則應該沒問題。

我不會真的建議模糊但從可用性角度，而的onkeyup或讓用戶單擊該字段旁邊的鏈接/按鈕。

用戶不一定知道他們引發的模糊（特別是如果發生模糊作爲專注於另一個字段的結果），所以他們可能無法弄清楚如何在阿賈克斯再次重複檢查用他們的用戶名返回一個錯誤。而是讓他們明白他們是如何觸發ajax的。

來源

2010-11-05 10:26:45 murraybiscuit

我的想法是，當他們離開現場時應該執行最終的用戶名檢查以告訴用戶，「嘿，你留下的這個用戶名無效「。此外，它還是一個相當大的網站：它已經擁有100,000名會員，並且正在增長。 – 2010-11-05 10:35:23

看看雅虎註冊。有一個「檢查」按鈕，你按下，它會進行檢查並返回可用的選項，這些選項可以基於用戶名。它通過模糊字段不起作用，但要求用戶單擊該按鈕。與gmail註冊同樣的故事。 – murraybiscuit 2010-11-05 15:48:03

感謝@elusive，我想出了以下解決方案：

jQuery.fn.inlineValidation = function() { 
    return this.each(function() { 
     var input = $(this); 
     var timeoutId = 0; 
     $(this).bind('keyup', function() { 
      clearTimeout(timeoutId); 
      timeoutId = setTimeout(function() { 
       var value = input.val(); 
       $.getJSON('/ajax/user_name.php', { 'user_name': value }, function(data) { 
        if (data.success === true) { 
         input.next('.form_feedback').removeClass('error').addClass('success').text(data.message); 
        } else { 
         input.next('.form_feedback').removeClass('success').addClass('error').text(data.message); 
        } 
       }); 
      }, 1000); 
     }); 
    }); 
};

來源

2010-11-05 10:55:48

什麼是創建AJAX用戶名驗證處理程序的最佳方法？

回答

相關問題