Javascript 如何在同一页上验证此表单？

注册基于订阅的产品的帐户后，我希望用户进行测验。我希望结果存储在MySQL数据库中。我一直在使用PHP和MySQL

我已经能够将测验结果和会员注册信息成功地发送到数据库，但验证这一点是我的问题，因为当用户返回一页时，测验将重置

例如，如果使用用户名，用户将收到一个错误，并被发送回测验，必须重新执行整个操作

如果有一种简单的方法，我感兴趣的是让javascript在MySQL数据库中搜索条件，例如用户名/电子邮件是否已经在使用

现在，我有一个javascript函数，在提交表单时调用它。它目前只验证输入的两个密码是否匹配。我还希望调用另一个函数来搜索该数据库，如果用户名/电子邮件存在，则返回false，这样用户就不会进入另一个页面

到目前为止，代码就是这样的

我只对php/MySQL的基本用法有经验。因此，我解决这个问题的方法是使用一个免费的php/MySQL用户系统，并对其进行修改，以便将测验结果也插入表中

这是一个common.php文件，我将它包含在每个页面上。 ' 这位于registration.php的顶部

// First we execute our common code to connection to the database and start the session 
require("common.php"); 

// This if statement checks to determine whether the registration form has been submitted 
// If it has, then the registration code is run, otherwise the form is displayed 
if(!empty($_POST)) 
{ 
    // Ensure that the user has entered a non-empty username 
    if(empty($_POST['username'])) 
    { 
        // Note that die() is generally a terrible way of handling user errors 
        // like this.  It is much better to display the error with the form 
        // and allow the user to correct their mistake.  However, that is an 
        // exercise for you to implement yourself. 
        die("Please enter a username."); 
    } 

    // Ensure that the user has entered a non-empty password 
    if(empty($_POST['password'])) 
    { 
        die("Please enter a password."); 
    } 

    // Make sure the user entered a valid E-Mail address 
    // filter_var is a useful PHP function for validating form input, see: 
    // http://us.php.net/manual/en/function.filter-var.php 
    // http://us.php.net/manual/en/filter.filters.php 
    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
    { 
        die("Invalid E-Mail Address"); 
    } 

    // We will use this SQL query to see whether the username entered by the 
    // user is already in use.  A SELECT query is used to retrieve data from the database. 
    // :username is a special token, we will substitute a real value in its place when 
    // we execute the query. 
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            username = :username 
    "; 

    // This contains the definitions for any special tokens that we place in 
    // our SQL query.  In this case, we are defining a value for the token 
    // :username.  It is possible to insert $_POST['username'] directly into 
    // your $query string; however doing so is very insecure and opens your 
    // code up to SQL injection exploits.  Using tokens prevents this. 
    // For more information on SQL injections, see Wikipedia: 
    // http://en.wikipedia.org/wiki/SQL_Injection 
    $query_params = array( 
        ':username' => $_POST['username'] 
    ); 

    try 
    { 
        // These two statements run the query against your database table. 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        // Note: On a production website, you should not output $ex->getMessage(). 
        // It may provide an attacker with helpful information about your code.  
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    // The fetch() method returns an array representing the "next" row from 
    // the selected results, or false if there are no more rows to fetch. 
    $row = $stmt->fetch(); 

    // If a row was returned, then we know a matching username was found in 
    // the database already and we should not allow the user to continue. 
    if($row) 
    { 
        die("This username is already in use"); 
    } 

    // Now we perform the same type of check for the email address, in order 
    // to ensure that it is unique. 
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            email = :email 
    "; 

    $query_params = array( 
        ':email' => $_POST['email'] 
    ); 

    try 
    { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    $row = $stmt->fetch(); 

    if($row) 
    { 
        die("This email address is already registered"); 
    } 



    // An INSERT query is used to add new rows to a database table. 
    // Again, we are using special tokens (technically called parameters) to 
    // protect against SQL injection attacks. 
    $query = " 
        INSERT INTO users ( 
            username, 
            password, 
            salt, 
            email,
            style
        ) VALUES ( 
            :username, 
            :password, 
            :salt, 
            :email,
            :style
        ) 
    "; 

    // A salt is randomly generated here to protect again brute force attacks 
    // and rainbow table attacks.  The following statement generates a hex 
    // representation of an 8 byte salt.  Representing this in hex provides 
    // no additional security, but makes it easier for humans to read. 
    // For more information: 
    // http://en.wikipedia.org/wiki/Salt_%28cryptography%29 
    // http://en.wikipedia.org/wiki/Brute-force_attack 
    // http://en.wikipedia.org/wiki/Rainbow_table 
    $salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647)); 

    // This hashes the password with the salt so that it can be stored securely
    // in your database.  The output of this next statement is a 64 byte hex 
    // string representing the 32 byte sha256 hash of the password.  The original 
    // password cannot be recovered from the hash.  For more information: 
    // http://en.wikipedia.org/wiki/Cryptographic_hash_function 
    $password = hash('sha256', $_POST['password'] . $salt); 

    // Next we hash the hash value 65536 more times.  The purpose of this is to
    // protect against brute force attacks.  Now an attacker must compute the hash 65537 
    // times for each guess they make against a password, whereas if the password 
    // were hashed only once the attacker would have been able to make 65537 different  
    // guesses in the same amount of time instead of only one. 
    for($round = 0; $round < 65536; $round++) 
    { 
        $password = hash('sha256', $password . $salt); 
    } 

    // Here we prepare our tokens for insertion into the SQL query.  We do not 
    // store the original password; only the hashed version of it.  We do store
    // the salt (in its plaintext form; this is not a security risk). 
    $query_params = array( 
        ':username' => $_POST['username'], 
        ':password' => $password, 
        ':salt' => $salt, 
        ':email' => $_POST['email'],
        ':style' => $_POST['style'] 
    ); 

    try 
    { 
        // Execute the query to create the user 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        // Note: On a production website, you should not output $ex->getMessage(). 
        // It may provide an attacker with helpful information about your code.  
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    // This redirects the user back to the login page after they register 
    header("Location: login.php"); 

    // Calling die or exit after performing a redirect using the header function 
    // is critical.  The rest of your PHP script will continue to execute and 
    // will be sent to the user if you do not die or exit. 
    die("Redirecting to login.php"); 
} 
 ?> 

当然，这里有一点小测验的html。为了篇幅，我只提出了一个问题，因为这已经是一篇很长的文章了。这位于php代码下面的registration.php中

// First we execute our common code to connection to the database and start the session 
require("common.php"); 

// This if statement checks to determine whether the registration form has been submitted 
// If it has, then the registration code is run, otherwise the form is displayed 
if(!empty($_POST)) 
{ 
    // Ensure that the user has entered a non-empty username 
    if(empty($_POST['username'])) 
    { 
        // Note that die() is generally a terrible way of handling user errors 
        // like this.  It is much better to display the error with the form 
        // and allow the user to correct their mistake.  However, that is an 
        // exercise for you to implement yourself. 
        die("Please enter a username."); 
    } 

    // Ensure that the user has entered a non-empty password 
    if(empty($_POST['password'])) 
    { 
        die("Please enter a password."); 
    } 

    // Make sure the user entered a valid E-Mail address 
    // filter_var is a useful PHP function for validating form input, see: 
    // http://us.php.net/manual/en/function.filter-var.php 
    // http://us.php.net/manual/en/filter.filters.php 
    if(!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) 
    { 
        die("Invalid E-Mail Address"); 
    } 

    // We will use this SQL query to see whether the username entered by the 
    // user is already in use.  A SELECT query is used to retrieve data from the database. 
    // :username is a special token, we will substitute a real value in its place when 
    // we execute the query. 
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            username = :username 
    "; 

    // This contains the definitions for any special tokens that we place in 
    // our SQL query.  In this case, we are defining a value for the token 
    // :username.  It is possible to insert $_POST['username'] directly into 
    // your $query string; however doing so is very insecure and opens your 
    // code up to SQL injection exploits.  Using tokens prevents this. 
    // For more information on SQL injections, see Wikipedia: 
    // http://en.wikipedia.org/wiki/SQL_Injection 
    $query_params = array( 
        ':username' => $_POST['username'] 
    ); 

    try 
    { 
        // These two statements run the query against your database table. 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        // Note: On a production website, you should not output $ex->getMessage(). 
        // It may provide an attacker with helpful information about your code.  
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    // The fetch() method returns an array representing the "next" row from 
    // the selected results, or false if there are no more rows to fetch. 
    $row = $stmt->fetch(); 

    // If a row was returned, then we know a matching username was found in 
    // the database already and we should not allow the user to continue. 
    if($row) 
    { 
        die("This username is already in use"); 
    } 

    // Now we perform the same type of check for the email address, in order 
    // to ensure that it is unique. 
    $query = " 
        SELECT 
            1 
        FROM users 
        WHERE 
            email = :email 
    "; 

    $query_params = array( 
        ':email' => $_POST['email'] 
    ); 

    try 
    { 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    $row = $stmt->fetch(); 

    if($row) 
    { 
        die("This email address is already registered"); 
    } 



    // An INSERT query is used to add new rows to a database table. 
    // Again, we are using special tokens (technically called parameters) to 
    // protect against SQL injection attacks. 
    $query = " 
        INSERT INTO users ( 
            username, 
            password, 
            salt, 
            email,
            style
        ) VALUES ( 
            :username, 
            :password, 
            :salt, 
            :email,
            :style
        ) 
    "; 

    // A salt is randomly generated here to protect again brute force attacks 
    // and rainbow table attacks.  The following statement generates a hex 
    // representation of an 8 byte salt.  Representing this in hex provides 
    // no additional security, but makes it easier for humans to read. 
    // For more information: 
    // http://en.wikipedia.org/wiki/Salt_%28cryptography%29 
    // http://en.wikipedia.org/wiki/Brute-force_attack 
    // http://en.wikipedia.org/wiki/Rainbow_table 
    $salt = dechex(mt_rand(0, 2147483647)) . dechex(mt_rand(0, 2147483647)); 

    // This hashes the password with the salt so that it can be stored securely
    // in your database.  The output of this next statement is a 64 byte hex 
    // string representing the 32 byte sha256 hash of the password.  The original 
    // password cannot be recovered from the hash.  For more information: 
    // http://en.wikipedia.org/wiki/Cryptographic_hash_function 
    $password = hash('sha256', $_POST['password'] . $salt); 

    // Next we hash the hash value 65536 more times.  The purpose of this is to
    // protect against brute force attacks.  Now an attacker must compute the hash 65537 
    // times for each guess they make against a password, whereas if the password 
    // were hashed only once the attacker would have been able to make 65537 different  
    // guesses in the same amount of time instead of only one. 
    for($round = 0; $round < 65536; $round++) 
    { 
        $password = hash('sha256', $password . $salt); 
    } 

    // Here we prepare our tokens for insertion into the SQL query.  We do not 
    // store the original password; only the hashed version of it.  We do store
    // the salt (in its plaintext form; this is not a security risk). 
    $query_params = array( 
        ':username' => $_POST['username'], 
        ':password' => $password, 
        ':salt' => $salt, 
        ':email' => $_POST['email'],
        ':style' => $_POST['style'] 
    ); 

    try 
    { 
        // Execute the query to create the user 
        $stmt = $db->prepare($query); 
        $result = $stmt->execute($query_params); 
    } 
    catch(PDOException $ex) 
    { 
        // Note: On a production website, you should not output $ex->getMessage(). 
        // It may provide an attacker with helpful information about your code.  
        die("Failed to run query: " . $ex->getMessage()); 
    } 

    // This redirects the user back to the login page after they register 
    header("Location: login.php"); 

    // Calling die or exit after performing a redirect using the header function 
    // is critical.  The rest of your PHP script will continue to execute and 
    // will be sent to the user if you do not die or exit. 
    die("Redirecting to login.php"); 
} 
 ?> 

<form id="quizForm"> 
<h2>Which Style?</h2>
Classy <input type="radio" name="style" value="Classy"><br>
Formal <input type="radio" name="style" value="Formal"><br>
Alternative <input type="radio" name="style" value="Alternative"><br>
Natural <input type="radio" name="style" value="Natural"><br>
Night Life <input type="radio" name="style" value="Nightlife"><br>
Businessman/Professional <input type="radio" name="style" value="Businessman/Professional"><br>
Hip/Vintage <input type="radio" name="style" value="Hip/Vintage"><br>
Seductive <input type="radio" name="style" value="Seductive"><br>
Athletic <input type="radio" name="style" value="Athletic"><br>
Worldly <input type="radio" name="style" value="Worldly"><br>
<br>
    Username:<br /> 
<input type="text" name="username">
<br /><br /> 
E-Mail:<br /> 
<input type="text" name="email" value="emaiil" placeholder="Email" />
<br /><br /> 
Password:<br />
<input type="password" id="pass" name="password">
<br /><br /> 
Confirm Password:<br>
<input type="password" id="c_pass" name="password">
<input type="submit" onclick="return checkPassword();" value="Register" name="Submit">
</form>

哪种款式？
优雅的

正式的

备选方案

天然的

夜生活

商人/专业人士

时尚/复古

诱人的

运动的

世俗的



用户名：




电子邮件：




密码：




确认密码：

JavaScript在客户端计算机上运行，它不能执行类似的操作

但是，您可以选择向php文件发送ajax请求，该文件将验证数据，然后将结果回显到浏览器

---

有关AJAX的更多信息：

您要查找的关键字是

AJAX

，示例不胜枚举：@GolezTrol说的是真的，搜索ajax。此外，尝试在你的问题中发布本地化的问题，而不是用大量的代码片段，这会让你和我们感到困难。没有你那么多的评论，但这里有一个AJAX示例=）考虑到你的水平，我不确定尝试用Javascript重做这件事是否是最好的。看起来，在出现错误时重新填充表单输入可能会有所帮助。您需要重构代码，使其不会使用

die

记录错误。下面是一个使用try/catch的示例：

<form id="quizForm"> 
<h2>Which Style?</h2>
Classy <input type="radio" name="style" value="Classy"><br>
Formal <input type="radio" name="style" value="Formal"><br>
Alternative <input type="radio" name="style" value="Alternative"><br>
Natural <input type="radio" name="style" value="Natural"><br>
Night Life <input type="radio" name="style" value="Nightlife"><br>
Businessman/Professional <input type="radio" name="style" value="Businessman/Professional"><br>
Hip/Vintage <input type="radio" name="style" value="Hip/Vintage"><br>
Seductive <input type="radio" name="style" value="Seductive"><br>
Athletic <input type="radio" name="style" value="Athletic"><br>
Worldly <input type="radio" name="style" value="Worldly"><br>
<br>
    Username:<br /> 
<input type="text" name="username">
<br /><br /> 
E-Mail:<br /> 
<input type="text" name="email" value="emaiil" placeholder="Email" />
<br /><br /> 
Password:<br />
<input type="password" id="pass" name="password">
<br /><br /> 
Confirm Password:<br>
<input type="password" id="c_pass" name="password">
<input type="submit" onclick="return checkPassword();" value="Register" name="Submit">
</form>