javascript - 通过ajax进行表单验证

Question

我有表单验证并通过ajax插入查询。它运行正确。但如果电子邮件存在，那么它应该出现在另一个页面上。

我的index.php是:

<div id="wrap"> <!--wrap start-->
    <br />
    <h1>Check the Email if Already Exist</h1>
     <form action="" method="post" id="mainform">
    <table id="table_data">
        <tr>
            <td>First Name</td>
            <td><input name="fname" type="text" size="30"></td>
            <td><span class="fname_val validation"></span></td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td><input name="lname" type="text" size="30"></td>
              <td><span class="lname_val validation"></span></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input name="email" type="text" size="30"></td>
            <td><span class="email_val validation"></span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input name="register" type="button" value="Register"> <span class="loading"></span></td>
            <td></td>
        </tr>
    </table>
   </form>
 </div> <!--wrap end-->

脚本是:

 <script>
 jQuery(function($) {
var val_holder;
$("form input[name='register']").click(function() { // triggred click
    /************** form validation **************/
    val_holder      = 0;
    var fname       = jQuery.trim($("form input[name='fname']").val()); // first name field
    var lname       = jQuery.trim($("form input[name='lname']").val()); // last name field
    var email       = jQuery.trim($("form input[name='email']").val()); // email field
    var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; // reg ex email check

    if(val_holder == 1) {
        return false;
    }
    val_holder = 0;
    /************** form validation end **************/
    /************** start: email exist function and etc. **************/
    $("span.loading").html("<img src='images/ajax_fb_loader.gif'>");
    $("span.validation").html("");
    var datastring = 'fname='+ fname +'&lname='+ lname +'&email='+ email; // get data in the form manual
    //var datastring = $('form#mainform').serialize(); // or use serialize
    $.ajax({
                type: "POST", // type
                url: "check_email.php", // request file the 'check_email.php'
                data: datastring, // post the data
                success: function(responseText) { // get the response
                    if(responseText == 1) { // if the response is 1
                        $("span.email_val").html("<img src='images/invalid.png'> Email are already exist.");
                        $("span.loading").html("");
                    } else { // else blank response
                        if(responseText == "") {
                            $("span.loading").html("<img src='images/correct.png'> You are registred.");
                            $("span.validation").html("");
                            $("form input[type='text']").val(''); // optional: empty the field after registration
                        }
                    }
                } // end success
    }); // ajax end
    /************** end: email exist function and etc. **************/
}); // click end
}); // jquery end

</script>

check_email.php

<?php
require_once("database.php"); // require the db connection
/* catch the post data from ajax */
$fname = $_POST['fname'];
$lname = $_POST['lname'];
$email = $_POST['email'];
$query = mysql_query("SELECT `email` FROM `users` WHERE `email` = '$email'");
if(mysql_num_rows($query) == 1) { // if return 1, email exist.
echo '1';
} 
else { // else not, insert to the table
$query = mysql_query("INSERT INTO `users` (`first_name` ,`last_name` ,`email`) VALUES ('$fname', '$lname', '$email')");

echo "<script type='text/javascript'>window.location='payment.php'  </script>";                 

}
?>

在 check_email.php 中，如果电子邮件不存在，则页面应继续到 payment.php。但它仍然在同一页面和 payment.php，还有一些查询。

Answer 1

使用

window.location.href = 'payment.php'

将浏览器重定向到另一个 php 文件或该文件中的任何文件