Jquery实时输入验证.发布功能

Jquery real time input validation with $.post function

本文关键字：功能 布功能 实时输入 验证 Jquery      更新时间：2023-09-26

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

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

在我按下提交按钮之前，这个工作得很好。如果我输入已经存在的内容，则不会提交表单。但是，如果我输入新的内容，即使数据仍然插入到数据库中，我仍然会得到("exists")文本。我总是会在("成功")之后得到("存在")。似乎当我提交时，来自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';
    }      
}

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

$('#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 ok时提交它:

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

有几个问题立即凸显出来。第一个错误函数总是返回false。第二个美元。Post是异步的。这意味着它将继续执行代码，同时等待ajax请求的响应。您可以在jquery中更改，我使用$.ajaxSetup({async:false});之前的$。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()
        };
        $.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);
    });
});
相关文章：