使用AJAX進行表單驗證

Question

我正在制作一個包含3個輸入字段的登錄表單（用戶名文字，密碼密碼和提交登錄）。

如您所見，我正在使用AJAX直接在客戶端驗證登錄。

var username = document.getElementById("username").getElementsByTagName("input")[0];
username.onfocus = function(){
    this.className = "thinking";
}
username.onblur = validateUsername;

以及類似的密碼。 默認情況下，“提交”按鈕是禁用的，只有在兩個字段都經過驗證后才啟用。

這是我的問題：輸入用戶名並單擊[Tab]按鈕后，我的PHP腳本將驗證用戶名並顯示綠色勾號，如圖所示。 但是，當我輸入密碼時，用戶將不得不手動單擊其他地方以觸發“ onblur”事件並執行密碼驗證，這不是很直觀且很吸引人。 密碼檢查應在焦點仍位於密碼字段上時進行，這意味着當用戶開始鍵入密碼時，應觸發一個事件，當他完成輸入時，應觸發另一個事件。 我應該怎么做？

謝謝！

Answer 1

您正在使用onBlur事件，這意味着僅當您按下[Tab]鍵時，當該字段保持不聚焦狀態時才會觸發該事件。 為了在密碼字段上觸發onBlur事件，您必須再次按[Tab]鍵。 您還可以使用具有默認驗證的HTML5輸入標簽 。 如果要在用戶鍵入時觸發事件，則可以使用keyup和keydown事件。 如果要在用戶開始鍵入時專門觸發一個事件，而在用戶結束操作時專門觸發一個事件，則必須假設用戶花了一些時間進行鍵入。 看一下這個例子 。