使用 javascript 和 ajax 实时验证用户名答案

【问题标题】：real time validation of username using javascript and ajax使用 javascript 和 ajax 实时验证用户名
【发布时间】：2012-07-15 17:11:29
【问题描述】：

我为我的注册表单编写了一个脚本，如果用户名输入字段上有 keyup 事件，则 javascript 检查输入的用户名是否有效，如果有效，则调用 ajax 函数来检查其可用性。

一切正常。但是用户名可以在不做key up的情况下输入，对于这些情况该怎么办？例如。 可以通过单击输入字段并选择浏览器建议的名称来输入用户名，或者使用自动表单填充器。在这些情况下没有“keyup”，那么这些情况该怎么办？

如果我遗漏了一些案例，请告诉我。

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

也将回调绑定到change 事件。

使用$('username_input').keyup 或$('username_input').bind('keyup', callback) 代替

$('username_input').bind('keyup change blur', function () {
    //
})

[更新]

如果你没有使用 jQuery 试试

function checkUserName() {
   // Ajax validation code
}
userinput = document.getElementById('yourusernameinputid');
userinput.onclick = userinput.onchange = userinput.onblur = checkUserName;

顺便说一句，您应该尝试学习 jQuery。它可以为您节省大量时间，并帮助您在更短的时间内制作出更好的网站。

[更新 2]

似乎没有办法通过使用事件的自动填充来检测更改。您需要设置一个计时器以固定间隔自动检查您的输入并检查您的最后一个值。

(function() {
   // It is always better to use a closure to prevent the value from 
   // getting overwritten by another piece of code
   var value = '';
   setInterval(2000, function() {
      if (userinput.value != value) {
           checkUserName();
           value = userinput.value;
      }
   });
})();

【讨论】：

我不知道 jquery。 onchange 属性有效，但仅在取消选择输入字段时才有效。我希望当某个值进入该字段时，应该调用该函数。
设置值后，手动触发事件，如：$("#yourField").change()。处理程序将执行。
正如乔伊斯所说，我建议你学习 jQuery。这是一个非常强大且易于学习的库。

【解决方案2】：

在以下情况下测试用户名：
- 会发生模糊事件（当文本字段失去焦点时），并且
- 在用户填写表单之前，或
- 发生变化事件（我认为这是最好的）。

【讨论】：

只有在字段被取消选中时才会触发更改。

【解决方案3】：

setInterval 是唯一的方法。

来源：

I want to trigger an event every single time data changes in an HTML text input field regardless of focus

jQuery: What listener do I use to check for browser auto filling the password input field?

【讨论】：