使用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 input tags。 如果要在用户键入时触发事件，则可以使用keyup和keydown事件。 如果您想在用户开始输入时专门触发一个事件，而在他完成输入时专门触发一个事件，那么您必须假设他需要一些时间进行输入。 看一下这个example。