如何在php中使用jquery ajax检查表单字段的实时可用性

时间:2013-09-12 14:12:01

标签: php jquery ajax

实际上我正在使用PHP中的jquery创建验证,而O则使用用户名和电子邮件可用性。我的用户名和电子邮件检查表现不错,但问题是,当我提交表单时,它不会插入我的数据库,也不会显示消息。这是代码:

HTML CODE

<form name="signup" id="signup">
<p><input type="text" id="username" name="username" /></p>
<span class="feedback1"></span>
<p><input type="password" id="password" name="password" /></p>
<span class="feedback2"></span>
<p><input type="text" id="email" name="email" /></p>
<span class="feedback3"></span>
<p><span class="span-submit"><input type="submit" name="submit" id="submit" value="Register"/></span></p>
 <span class="feedback4"></span>

JQUERY CODE

$(document).ready(function(){

$("#username").val("username").addClass("watermark");

$("#password").val("password").addClass("watermark");

$("#email").val("email").addClass("watermark");

 //Validation for username

function validate_name(name){

   $.post("username_check.php",{username:signup.username.value},function(data){
        $(".feedback1").text(data);
    });
}
$("#username").focusin(function(){
    if($.trim($(this).val())=="username"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback1").text("please type your name.");
    }
    else{
        validate_name($("#username").val());
    }
}).focusout(function() {
    if($("#username").val()==""){
        $(this).val("username");
        $(this).addClass("watermark");
        $(".feedback1").text("");
    }
});
$("#username").keyup(function(){
    name=$("#username").val();
    if(name.length<5){
        $(".feedback1").text("Please type in your name above 5 characters.");
    }
    else{
        validate_name($("#username").val());
    }
});
//validation for password
$("#password").focusin(function(){
    if($.trim($(this).val())=="password"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback2").text("please type your password.");
    }
}).focusout(function() {
    if($("#password").val()==""){
        $(this).val("password");
        $(this).addClass("watermark");
        $(".feedback2").text("");
    }
});
$("#password").keyup(function(){
    name=$("#password").val();
    if(name.length<8){
        $(".feedback2").text("Please type in your password above 8 characters.");
    }
    else{
        $(".feedback2").text("Password is accepted.");
    }
});
//validation for email
function validate_email(email){
    $.post("email_check.php",{email:email},function(data1){
        $(".feedback3").text(data1);
    });
}
$("#email").focusin(function(){
    if($.trim($(this).val())=="email"){
        $(this).val("");
        $(this).removeClass("watermark");
        $(".feedback3").text("please type your email.");
    }
    else{
        validate_email($("#email").val());
    }
}).focusout(function() {
    if($("#email").val()==""){
        $(this).val("email");
        $(this).addClass("watermark");
        $(".feedback3").text("");
    }
});
$("#email").keyup(function(){
        validate_email($("#email").val());
});
//submit the form
$("#submit").click(function(e){
    var data = 'username=' + $("#username").val() + '&password=' + $("#password").val() + '&email=' + $("#email").val();
    $.ajax({
        type:'POST',
        url:'index_db.php',
        cache:false,
        data:data,
        success: function(data){
            $(".feedback4").text(data);
        }
    });
    return false;
});

});

PHP代码

require_once "db_function.php";
$username=mysql_real_escape_string($_POST["username"]);
$password=mysql_real_escape_string($_POST["password"]);
$email=mysql_real_escape_string($_POST["email"]);
$username_trim=trim($username);
$password_trim=trim($password);
$email_trim=trim($email);
$query="select * from userdata where name='$username'";
$result=mysql_query($query);
$rw=mysql_fetch_row($result);
if(empty($username_trim) && empty($password_trim) && empty($email_trim)){
    echo "OOPS! You must filled up all fields.";
}
else if(empty($username_trim)){
    echo "Username must not be blank.";
}
else if(!preg_match("/^([a-zA-Z])+([ a-zA-Z]){4,20}+$/",$username_trim)){
        echo "More than 5 and less than 20 char required.";
}
else if($rw>0){
        echo "the username is already been taken";
}
else if(!preg_match('/^([a-zA-Z]{8,14})+$/',$password_trim)){
        echo "Please put password in the range of 8 and 12";
}
else if(empty($email_trim)){
    echo "Email must not be blank.";
}
else if(!preg_match('/^([a-zA-Z0-9_-])+([\.a-zA-Z0-9_-])*@([a-z0-9-])+(\.[a-z0-9-]+)*\.([a-z]{2,6})+$/',$email_trim)){
    echo "Please put correct email format";
}
else{
$password_en=md5($password_trim);
mysql_query("insert into userdata values('$username_trim','$password_en','$email_trim')");
$x=mysql_affected_rows();
if($x==0){
    echo "Hello";

}
else{
    echo "Failed.";
}
}

请告诉我如何将这些值提交到数据库并重定向到另一页。

1 个答案:

答案 0 :(得分:0)

使用jquery submit的重点是即使提交也不会被重定向到另一个页面。如果您希望页面提交到另一个页面并重定向,那么只需使用

<form name="signup" id="signup" action="index_db.php">

并删除您的jquery提交事件