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

Question

大家好:
我对 Jquery 和 Web 开发有点陌生，所以请耐心等待。我想在我的网站上使用 Jquery 实现实时输入验证。也许我在这篇文章中存在一些语法错误，但我确信我的真实代码中没有任何语法错误。

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

在我按下提交按钮之前，这工作得很好。如果我输入已经存在的内容，则不会提交表单。但是，如果我输入新的内容，即使数据仍然插入到数据库中，我仍然会得到(“存在”)文本。我总是会在(“成功”)之后得到(“存在”)。似乎当我提交时，来自 error() 的 .post 请求是在表单的 .post 请求之后发出的。有人如何解决这个错误吗？或者另一种方式来构建这种类型的输入验证？谢谢

$('.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

我以前也遇到过这个问题。您可以避免这种情况以防止默认行为:

$('#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 post没问题的时候还想提交:

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