结合使用ajax、jQuery和php进行实时表单验证
好的,我有一个用户要填写的表单,这是用户名字段和颜色验证字段。当焦点更改时,用户名字段会自动检查我的数据库,以提醒用户是否使用了用户名。颜色验证字段将屏幕上显示的图像颜色与用户输入的颜色进行比较。如果这两个字段都已成功完成,则会显示要注册的按钮。这是我正在使用的jQuery结合使用ajax、jQuery和php进行实时表单验证,php,jquery,ajax,Php,Jquery,Ajax,好的,我有一个用户要填写的表单,这是用户名字段和颜色验证字段。当焦点更改时,用户名字段会自动检查我的数据库,以提醒用户是否使用了用户名。颜色验证字段将屏幕上显示的图像颜色与用户输入的颜色进行比较。如果这两个字段都已成功完成,则会显示要注册的按钮。这是我正在使用的jQuery $(document).ready(function() { $("#username").blur(function() { //remove all the class add the messa
$(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);
});
}
});
});
});
颜色的第二个字段设置相同:
$(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);
});
}
});
});
});
我想让“username”和“color”两个字段根据状态更改“test1”和“test2”的会话变量。因此,如果用户名无效,test2将被分配一个0而不是1。颜色验证也是如此。当时的想法是,我将进行单独的函数检查,看看“test1”和“test2”是否都是1。如果是,用户将看到submit按钮,如果不是,则会看到错误消息
这就是“checkboth.php”的外观
$test1= $_SESSION['test1'];
$test2= $_SESSION['test2'];
echo $test1;
echo $test2;
if(($test1 ==1) && ($test2 ==1))
{
echo("yes");
}
else{
echo("no");
}
我对第三个函数使用相同的jQuery结构。这是可行的,然而,我总是得到“是的”。在会话的var_转储中,我发现test1和test2总是等于0。我怎样才能做到这一点呢?
提前谢谢 为什么不使用beautiful?它有。我更喜欢ajax而不是post……毕竟,您正在尝试在不中断UI体验的情况下对数据进行异步检查。这是ajax中的“A” 如我所示,如果您计划使用JSON作为返回数据,那么您必须在php文档中返回JSON。现在,您已经在页面上打印了返回yes/no的命令,如果您将回调类型指定为text,则该命令将起作用。否则,使用你的方法,它只会变得混乱
至于您的颜色验证,我将在第一次验证成功时“堆叠”它,因为只有在检查用户名之后才能进行验证。使用jQuery/php异步执行服务器端验证的最简单方法之一是使用$.getJSON。虽然它可能不完全符合您已经构建应用程序的方式,但采用这种方法进行重构并不那么耗时。这里有一篇很好的文章让你开始:谢谢,这很有帮助,但是我在发布这篇文章20分钟后就解决了这个问题。我更改了会话变量,以便在调用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= $_SESSION['test1'];
$test2= $_SESSION['test2'];
echo $test1;
echo $test2;
if(($test1 ==1) && ($test2 ==1))
{
echo("yes");
}
else{
echo("no");
}
$.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
}
});