何时检查表单输入数据 - 使用模糊或更改事件？

Question

假设我有一个这样的表格：

Name:<input type="text" name="xxx"  id="name"/>
Type:<select>
          <option>xx</option>
          <option>xx</option>
      </select>
<input type="submit" disabled="disabled" id="sub" />

现在，我想检查以确保用户名是唯一的。并且只有名称是唯一的，才能使用提交按钮。所以我使用jQuery AJAX来查询数据库。

但现在我想知道何时检查它？

首先我使用它：

$("#name").blur(function () {
    $.get(........);
}

但是现在，在现代浏览器中，他们提供了表单数据保存和auto-filled功能。因此，当用户dbclick输入时，浏览器将提供一个数据列表（历史数据）供用户选择（参见下图）。

当用户选择其中一个时，无法触发blur事件。我也尝试使用change事件，但当用户使用keybord输入时，它会对服务器造成太多请求。

如何解决这个问题？

更新 以下答案都不是完美的。现在我只是在我的页面中使用一个计时器来检查“名称”是否每0.5秒更改一次。它似乎符合我的要求。

Answer 1

简单的解决方案：在密码字段的焦点上激活ajax调用。

Answer 2

你应该做的是当用户双击文本框，下载选项并将它们存储在代码后面的数组中。当用户在文本框中键入内容时，删除不需要的项目。

此外，如果您要触发模糊（在输入元素上）等事件，您甚至可能希望使用更改甚至是下拉列表。

Answer 3

我将使用的方法是在on page load中加载用户名集合，并根据change event上的集合检查用户输入的数据。这样，您的数据库只需要处理每页加载的单个请求，虽然前端还有更多工作要做，但它不会对用户的体验产生负面影响。

有可能出现并发问题，两个新用户同时加载页面，选择相同的用户名并尝试提交，最后提交的用户将有一个活动的提交按钮，但用户名无效，而你需要服务器端来处理这个问题。

Answer 4

您也可以直接添加“检查可用性”按钮，并在“检查可用性”按钮的点击事件中激活用户名唯一性检查功能。

Name:<input type="text" name="xxx"  id="name"/> <input type="button" name="checkUsername"  id="checkUsername" value="Check availability"/>
Type:<select>
          <option>xx</option>
          <option>xx</option>
      </select>
<input type="submit" disabled="disabled" id="sub" />

$("#checkUsername").click(function (e) {
    $.get(........);
    e.preventDefault();
    return false;
}