2

我想验证一个表单，以便我可以检查基本信息（例如输入的用户名、用户名的最小长度等），而且我可以确保还没有用户名和电子邮件之类的内容（这需要数据库搜索） .

我有所有的碎片，在玩了一圈后缩小了范围，发现$.post声明虽然是为了添加到我的“失败”计数器，但并没有这样做。我怎样才能从该$.post行获得某种形式的输出，以便我可以真正验证（因为现在，即使用户名不可用，它也会提交表单）。

这是我的<script>（尽管为了简单起见，只显示用户名部分）。请注意，“usernameoff”是我的错误块：

function validateForm()
{
   // set variables
   var username=document.forms["registrationnew"]["username"].value;
   var usernamespace=username.indexOf(" ");

   // set fail counter variable to determine if any requirements failed
   var counter=0;

   // check that username isn't blank, containing spaces, too short, or taken
   if (username==null || username=="")
   {
      counter++;
      $('#usernameoff').html("Must enter a username");
   }
   else if (username.indexOf(" ") >= 0)
   {
      counter++;
      $('#usernameoff').html("Cannot contain spaces");
   }
   else if (username.length < 3)
   {
      counter++;
      $('#usernameoff').html("Must be at least three characters");
   }
   else
   {
      $.post("check_username.php", {username: username}, function(result)
      {
         if(result == 0)
         {
            $('#usernameoff').html("Available");
         }
         else
         {
            counter++;
            $('#usernameoff').html("Not available");
         }
      });
   }  

   // if any test failed, return false
   if (counter > 0)
   {
      document.getElementById("errorflag").innerHTML=counter;
      return false;
   }
}

$.post进行查询以确定输入的用户名是否已被使用（并返回 0 或 1）。我的问题是，无论它返回哪个，它都不会增加“计数器”，因此表单仍然提交。

4

1 回答 1

1

您的最终测试 ( if (counter > 0)) 将在您的 AJAX 调用返回之前运行。这是 AJAX 的“异步”部分。

在您的情况下，最简单的解决方案是$.post用同步调用替换：

$.ajax({
  type: "POST",
  url: "check_username.php", 
  data: {'username': username},
  async: false,
  success: function(result) { /* ... */ }
});

这将在您的脚本等待返回时导致延迟，但由于它在您自己的服务器上，因此该延迟应该相当小。

（同步调用并不总是可行的。阅读文档以.ajax()获取更多信息。）

于 2013-01-09T16:35:32.550 回答