Question

嗨大家：
我是Jquery和Web开发的新手，所以请耐心等待。我想在我的网站上使用Jquery实现实时输入验证。也许我在这篇文章中有一些语法错误，但我确信我的实际代码中没有任何语法错误。

这就是我所拥有的，每当用户输入非空白的内容时，将调用error（）并向服务器（PHP + MySQL）发出post请求以检查输入值是否已存在。按下提交按钮时，也会再次使用error（）。

在按下提交按钮之前，此功能完全正常。如果我输入已存在的内容，则不会提交表单。但是如果我输入新内容，即使数据仍然插入数据库，我仍然会得到（“存在”）文本。我将永远得到（“成功”）之后的（“存在”）。看来，当我提交时，来自error（）的.post请求是在表单的.post请求之后发出的。有人如何解决这个bug？或者另一种构造这种输入验证的方法?? 谢谢

$('.unique').change(function(){
    error($(this));
});

function error(obj)
{
    var ok = true;

    if(obj.val().length == 0)
    {
        alert('This field can not be blank');
        ok = false;
    }

    else
    {
        var data = "action=check&input=" + obj.attr('name') + "&value=" + obj.val();
        $.post('database.php',
               data,
               function(reply){
                   if(reply == true)
                   {
                      alert("This " + obj.attr('name') + " already exists");
                      ok = false; 
                   }        
               });

    }
    return ok;
}

//When the user submits the form
$('#info').submit(function(){
    var ok = true;
    var data = 'action=insert&' + $(this).serialize();

    //Passes each input to the error()
    $('.unique').each(function{
       var temp = error($(this));
       ok = ok && temp;
    });

    if(!ok) return false;

    $.post('database.php',
           data,
           function(reply){
               alert(reply);
           });
});

<form id="info" name="info" action="" method="post">
   <input type ="text" class = "unique" id = "username" name = "username" class = "unique">
   <input type ="text" class = "unique" id = "email"    name = "email"    class = "unique">
</form>

//On the server
if(isset($_POST['action']))
{
    if($_POST['action'] == 'check')
    { 
        $query = sprintf("select * from Users where %s = '%s'", 
                                                                $_POST['input'],
                                                                $_POST['value']);
        $result = mysql_query($query);
        if(mysql_num_rows($result) > 0)
        { echo true;}

        else
        { echo false;}
    }
    else
    {
        $query = sprintf("insert into Users(username, email) values('%s','%s')", 
                    $_POST['username'],
                    $_POST['email']);
        if(!($result = mysql_query($query)))
            die(mysql_error());

        echo 'Success';
    }      
}

Answer 1

有几个问题立即脱颖而出。第一个错误函数总是返回false。第二个$ .post是异步的。这意味着它将在等待来自ajax请求的响应时继续执行代码。您可以在$ .post请求之前使用$.ajaxSetup({async:false});在jquery中更改它。

这是一个应该正常工作的代码示例：

$('.unique').change(function(){
    error($(this));
});

function error(obj)
{
    var ok = true;

    if(obj.val().length == 0)
    {
        alert('This field can not be blank');
        ok = false;
    }
    else
    {
        var data = {
          action: 'check',
          input: obj.attr('name'),
          value: obj.val()
        };

        $.ajaxSetup({async:false}); // Force program execution to wait for ajax response 
        $.post('database.php', data, function (reply) {
          if (reply) {
            alert("This " + obj.attr('name') + " already exists");
            ok = false;
          }
          $.ajaxSetup({async:true}); // Setup ajax to be async again
        });
    }
    return ok;
}

//When the user submits the form
$('#info').live('submit', function(e){
    e.preventDefault();
    var ok = true;

    //Passes each input to the error()
    $('.unique').each(function(){
       ok = ok && error($(this));
    });

    if (!ok) { 
      return false;
    }

    $.post('database.php', 'action=insert&' + $(this).serialize(), function(r) {
      alert(reply);
    });
});

Answer 2

我过去遇到过这个问题。您可以避免这种情况来防止默认行为：

$('#info').submit(function(e){
e.preventDefault();

var ok = true;
var data = 'action=insert&' + $(this).serialize();

//Passes each input to the error()
$('.unique').each(function{
   var temp = err($(this));
   ok = ok && temp;
});

if(!ok) return false;

$.post('database.php',
       data,
       function(reply){
           alert(reply);
       });
});

这将避免实际提交表单。如果您仍想在ajax帖子合适时提交它：

$('#info').submit(function(){
  var theForm = this;
  $.post('database.php',
       data,
       function(reply){
           alert(reply);
           theForm.submit();
       });
});

使用$ .post函数进行Jquery实时输入验证

2 个答案: