将ajax、jQuery和php一起用于实时表单验证


Using ajax, jQuery and php together for real-time form validation

好的,我有一个用户将填写的表单,这是用户名字段和颜色验证字段。当焦点更改时,username字段会自动检查我的数据库,以提醒用户他们的用户名是否被占用。颜色验证字段将屏幕上显示的图像的颜色与用户输入的颜色进行比较。如果这两个字段都成功完成,则会显示要注册的按钮。这是我使用的jQuery

$(document).ready(function()
{
    $("#username").blur(function()
    {
    //remove all the class add the messagebox classes and start fading
    $("#msgbox2").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
    //check the username exists or not from ajax
    $.post("checkusername.php",{ username:$(this).val() } ,function(data)
    {
      if(data=='no') //if username not avaiable
      { 
        $("#msgbox2").fadeTo(200,0.1,function() //start fading the messagebox
        {//alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Your username was taken<? $_SESSION['test2'] = 0; ?>').addClass('messageboxerror') .fadeTo(900,1);
        });     
      }
      else 
      {
        $("#msgbox2").fadeTo(200,0.1,function()  //start fading the messagebox
        { //alert(data);
          //add message and change the class of the box and start fading
          $(this).html('User name is available!<? $_SESSION['test2'] = 1; ?>').addClass('messageboxok').fadeTo(900,1);  
        });

      }
    });
});
});

上面代码的php文件是:

session_start();
require("../db.php");
$username = $_POST['username'];
$sql ="SELECT * FROM user WHERE username = '$username'";
$go = mysql_query($sql,$db);
$numrows = mysql_num_rows($go);

if ($numrows) {
// no
echo("no");
} else {
// yes
echo "yes";
}

颜色的第二个字段设置相同:

$(document).ready(function()
{
$("#color").blur(function()
{
    //remove all the class add the messagebox classes and start fading
    $("#msgbox").removeClass().addClass('messagebox').text('Checking...').fadeIn("slow");
    //check the color is right or not
    $.post("checkcolor.php",{ color:$(this).val() } ,function(data)
    {
      if(data=='no') //if color is incorrect
      { 
        $("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
        {//alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Your color was incorrect<? $_SESSION['test1'] = 0; ?>').addClass('messageboxerror') .fadeTo(900,1);
        });     
      }
      else 
      {
        $("#msgbox").fadeTo(200,0.1,function()  //start fading the messagebox
        { //alert(data);
          //add message and change the class of the box and start fading
          $(this).html('Verification Successful<? $_SESSION['test1'] = 1; ?>').addClass('messageboxok').fadeTo(900,1);  
        });
      }
    });
});
});

上面代码的php文件是:

session_start();
$sescolor= $_SESSION['color'];
$usercolor = $_POST['color'];
$_SESSION['usercolor']= $_POST['color'];
$usercolor = strtoupper($usercolor);
if ($sescolor==$usercolor) {
    echo("yes");
} else {
  echo "no";
}

我想做的是让"username"answers"color"这两个字段根据它们的状态来更改"test1"answers"test2"的会话变量。因此,如果用户名无效,test2将被分配一个0而不是1。颜色验证也是如此。然后我的想法是,我将有一个单独的功能检查,看看"test1"answers"test2"是否都是1。如果是,用户将看到提交按钮,如果不是,他们将看到一条错误消息。

这就是"checkpath.php"的样子

$test1= $_SESSION['test1'];
$test2= $_SESSION['test2'];

echo $test1;
echo $test2;
if(($test1 ==1) && ($test2 ==1))
{
echo("yes");
}
else{
echo("no");
}

对于第三个函数,我使用了相同的jQuery结构。这是有效的,然而,我总是回复"是"。在会话的var_dump中,我发现test1和test2总是等于0。我该如何完成这项工作?提前感谢!

我更喜欢ajax而不是post。。。。毕竟,您正在尝试在不中断UI体验的情况下对数据进行异步检查。这是ajax中的"A"。

$.ajax({
url: "checkusername.php",                   //
timeout: 30000,
type: "POST",
data: data,
dataType: 'json',
error: function(XMLHttpRequest, textStatus, errorThrown)  {
    alert("An error has occurred making the request: " + errorThrown)
},
success: function(data){
        //do highlights
}
});

如果您计划使用JSON作为返回数据,如我所示,那么您必须在php文档中返回JSON。现在,您已经在页面上打印了返回是/否的消息,如果您将回调类型指定为文本,这将起作用。否则,使用你的方法只会让人感到困惑。

至于你的颜色验证,我会在第一次成功时"叠加"它,因为只有在检查完用户名后才能进行。

为什么不使用漂亮的jquery验证插件?它具有远程验证方法。