使用 AJAX 进行表单验证答案

【问题标题】：Form validation using AJAX使用 AJAX 进行表单验证
【发布时间】：2015-06-03 07:02:21
【问题描述】：

我正在制作一个包含 3 个输入字段的登录表单（用户名文本、密码密码和登录提交）。

如您所见，我使用 AJAX 直接在客户端验证登录。

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

密码也是如此。提交按钮默认是禁用的，只有在两个字段都验证后才启用。

这是我的问题：输入用户名并点击 [Tab] 按钮后，我的 PHP 脚本会验证用户名并显示绿色勾号，如图所示。但是当我输入密码时，用户将不得不手动点击其他地方来触发“onblur”事件并执行密码验证，这不是很直观和吸引人。密码检查应该在焦点仍然在密码字段上时完成，这意味着当用户开始输入密码时，应该触发一个事件，当他完成输入时，应该触发另一个事件。我该怎么办？

谢谢！

【问题讨论】：

答案就在这个问题上。我也用过stackoverflow.com/questions/14042193/…
稍微延迟一下使用onkeydown怎么样？
最好用onkeyup。
是的，我的意思是onkeyup :) 更好的是oninput，但IE8 不支持它。
如我们所见，您没有使用 ajax... 至少在您提供的代码中没有。但这与您的问题无关。

标签： javascript php ajax forms validation

【解决方案1】：

您正在使用 onBlur 事件，这意味着它只会在您按下 [Tab] 键时发生的字段未聚焦时触发。为了在密码字段上触发 onBlur 事件，您必须再次按 [Tab] 键。您还可以使用具有默认验证的HTML5 input tags。如果您想在用户键入时触发事件，则可以使用 keyup 和 keydown 事件。如果您想在用户开始打字时专门触发一个事件，在他完成时触发一个事件，那么您必须假设他需要一些时间来打字。看看这个example。

【讨论】：