1

假设我有这样的表格：

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事件，但是当用户使用键盘输入时，它会导致对服务器的请求过多。

如何解决这个问题？

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

4

4 回答 4

1

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

于 2012-06-15T00:54:57.650 回答
0

您也可以简单地为“检查可用性”添加按钮，并在“检查可用性”按钮的单击事件上触发用户名唯一性检查功能。

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;
}
于 2012-06-18T03:07:57.793 回答
0

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

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

于 2012-06-15T01:06:21.447 回答
0

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

此外，如果您想触发像 blur 之类的事件（在输入元素上），您甚至可能希望对下拉列表使用更改。

于 2012-06-15T00:54:04.610 回答