无法获取 jquery 表单验证以注册 $.post 元素

Question

我想验证一个表单，这样我可以检查基础(如用户名输入，用户名的最小长度等)，但也这样，我可以确保像用户名和电子邮件的东西还没有(这需要一个数据库搜索)。

我有所有的部分，在玩了一圈之后，我缩小了范围，发现$.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)。我的问题是，无论它返回哪个，它都不增加'counter'，因此表单仍然提交。

Answer 1

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

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

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

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

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