1

目前，我正在调整注册页面以使用 Ajax/jQuery。它处于简单阶段，只需输入用户名和密码。

我想使用 jQuery 告诉用户用户名文本框中的当前条目是否无效或已被使用。如果满足任一条件，则 div namemsg 将添加文本并执行fadeIn 事件。

页面加载时禁用了提交按钮，并在通过验证后启用了按钮。为此，我有以下 ajax 请求来处理用户名验证

$("#username").keyup(function(){
    //get current value
    thisVal = $(this).val();

    //execute request to see if current val exists in database
    $.ajax({
      type: "GET",
      url: "includes/phpscripts.php?action=checkUser",
      data: {username:thisVal},
      success: function(data){

        //if username is already taken, show warning and disable submit button
        if (data == 'true'){
          $("#namemsg").text("Username is already taken");
          $("#namemsg").fadeIn(100);
          $("#submit").attr('disabled', 'disabled');
        } 

        //otherwise, possible valid username
        else if (data == 'false'){

          //check if username is of the proper length.  If not, display
          //error and disable submit button
          if ($(this).val().length < 5){
            $("#namemsg").text("Invalid Username");
            $("#namemsg").fadeIn(100);
            $("#submit").attr('disabled', 'disabled');
          } 


          //valid username, enable submit button and hide any error messages
          else {
            $("#namemsg").hide();
            $("#submit").removeAttr("disabled");
          }

        }
      }

    });

    return false;
});

我的问题是请求从服务器获取了propper值，但是firebug抱怨elem.nodeName在jquery 1.7.2的第2368行未定义。那条线是

if ( elem ) {
  hooks = jQuery.valHooks[ elem.nodeName.toLowerCase() ] || jQuery.valHooks[ elem.type ];

当我在 处设置断点时if (elem)，elem有值

nodeName : INPUT
type : text

并hooks返回未定义。这是 Firefox 特有的问题，还是我的代码或 jQuery 的问题？另外，是否有解决方法？

4

2 回答 2

5

在您的success处理程序中，this是 jqXHR 请求，而不是$("#username")字段，因此$(this).val()出错。

由于您已经缓存了值，因此最好使用thisVal而不是$(this).val()，但通常解决此问题的方法是将context选项设置为元素；

$.ajax({
    context: this,
    type: 'GET',
    // etc
});

您可以在页面上查看此方法的文档jQuery.ajax()（搜索“上下文”）。

您将看到的另一种方法是将this指向元素的 that 设置为另一个变量；

$("#username").keyup(function(){
    var that = this;

    $.ajax({
      type: "GET",
      url: "includes/phpscripts.php?action=checkUser",
      data: {username:thisVal},
      success: function(data){
          // use `that` and `$(that)` in here
      }    
    });

    return false;
});
于 2012-06-14T15:13:33.913 回答
2

问题出在这一行

if ($(this).val().length < 5){

this不指#username异步回调的内部。

采用

if (thisVal.length < 5){

正如您之前缓存的那样。

于 2012-06-14T15:13:47.987 回答