使用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事件。 如果要在用户开始键入时专门触发一个事件，而在用户结束操作时专门触发一个事件，则必须假设用户花了一些时间进行键入。 看一下这个例子 。