一起使用ajax，jQuery和php進行實時表單驗證

Question

好的，我有一個供用戶填寫的表單，這些表單是用戶名字段和顏色驗證字段。 更改焦點時，用戶名字段會自動檢查我的數據庫，以提醒用戶是否使用了用戶名。 顏色驗證字段將屏幕上顯示的圖像的顏色與用戶輸入的顏色進行比較。 如果這兩個字段都成功完成，則顯示要注冊的按鈕。 這是我正在使用的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";
}

我想要發生的是使用“用戶名”和“顏色”這兩個字段根據狀態更改“ test1”和“ test2”的會話變量。 因此，如果用戶名無效，則將為test2分配一個0而不是1。對於顏色驗證，相同。 然后的想法是，我將進行單獨的功能檢查，以查看“ test1”和“ test2”是否均為1。如果是，則用戶將看到“提交”按鈕，否則，將看到錯誤消息。

這就是“ checkboth.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。我該如何完成這項工作？ 提前致謝！

Answer 1

為什么不使用漂亮的jquery驗證插件 ？ 它具有遠程驗證方法 。

Answer 2

我更喜歡用ajax發布...。畢竟，您正在嘗試對數據進行異步檢查，而不會中斷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。 現在，您已經在頁面上返回了“是/否”，如果您將回調類型指定為文本，這將起作用。 否則，使用您的方法會變得很困惑。

至於您的顏色驗證，我會在第一次驗證成功時將其“堆棧”起來，因為您必須先檢查用戶名后才能進行驗證。