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

Question

好的，所以我有一個用戶填寫的表單，它們是用戶名字段和顏色驗證字段。當焦點改變時，用戶名字段會自動檢查我的數據庫，以提醒用戶他們是否使用了用戶名。顏色驗證字段將屏幕上顯示的圖像的顏色與用戶輸入的顏色進行比較。如果這兩個字段都成功完成，則顯示要註冊的按鈕。這是我使用

$(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); 
     }); 


     } 

    }); 

}); 
}); 

jQuery的上面的代碼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

我更喜歡ajax來發布....畢竟，您試圖在不中斷UI體驗的情況下對數據進行異步檢查。這就是阿賈克斯的「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。現在，你已經得到它返回是/否打印在頁面上，這將工作，如果你指定你的回調類型爲文本。否則，使用你的方法就會變得困惑。

至於你的顏色驗證，我會在第一次成功時「疊加」它，因爲直到用戶名被選中後才能發生。

Answer 2

爲什麼不使用漂亮的jquery validation plugin？它有remote validation method。