Question

我目前正在编写Javascript中的注册验证代码，验证功能检查的一个问题是用户提供的电子邮件地址是否已经存在于数据库中。

要检查这个我正在使用ajax，但我的其他Javascript都没有等待它完成。

我尝试了很多我在网上找到的解决方案，但似乎没有任何效果。

这是我的表格：

<form class="register-form" id="register-form" action="register.php" method="post" onSubmit="return registervalidation()">
  <input name="username" id="registerusername" type="text" placeholder="gebruikersnaam" maxlength="20"/>
  <input name="password" id="registerpassword" type="password" placeholder="wachtwoord" maxlength="20"/>
  <input name="email" id="registeremail" type="text" placeholder="emailadres" maxlength="50"/>
  <p class="error" id="register-error"></p>
  <input type="submit" value="Aanmaken"/>
  <p class="message">Heb je al een account? <a href="#">Log in</a></p>
</form>

这是Javascript代码：

<script>

var invalid = 0;

function registervalidation() {

    invalid = 0;
    document.getElementById("register-error").innerHTML = "";

    if (document.getElementById("registerusername").value == "") {
        document.getElementById("register-error").innerHTML = "Gelieve een gebruikersnaam in te typen.<br>";
        invalid += 1;
    }

    else {
        if (document.getElementById("registerusername").value.match(/^[a-zA-Z0-9]+$/)) {
            /* Input is oke */
        }
        else {
            /* Input is niet oke */
            document.getElementById("register-error").innerHTML = "Een gebruikersnaam mag enkel bestaan letters en cijfers.<br>";
            invalid += 1
        }
    }

    if (document.getElementById("registerpassword").value == "") {
        var red = document.getElementById("register-error").innerHTML;
        document.getElementById("register-error").innerHTML = red + "Gelieve een wachtwoord in te typen.<br>";
        invalid += 1;
    }

    else {
        if (document.getElementById("registerpassword").value.match(/^[a-zA-Z0-9]+$/)) {
            /* Input is oke */
        }
        else {
            /* Input is niet oke */
            var red = document.getElementById("register-error").innerHTML;
            document.getElementById("register-error").innerHTML = red + "Een wachtwoord mag enkel bestaan uit letters en cijfers.<br>";
            invalid += 1;
        }
    }

    if (document.getElementById("registeremail").value == "") {
        var red = document.getElementById("register-error").innerHTML;
        document.getElementById("register-error").innerHTML = red + "Gelieve een emailadres in te typen.<br>";
        invalid += 1;
    }

    else {

        if (document.getElementById("registeremail").value.indexOf("@") == -1) {
            var red = document.getElementById("register-error").innerHTML;
            document.getElementById("register-error").innerHTML = red + "Gelieve een geldig emailadres in te typen.<br>";
            invalid += 1;
    }

    else {

        var checkmail = $('#registeremail').val();
        $.ajax({
        url: "validation.php",
        type: 'POST',
        data: 'email=' + checkmail,
        success: function(result){
             if(result == null){
             }
             else{
            var red = document.getElementById("register-error").innerHTML;
            document.getElementById("register-error").innerHTML = red + "Dit emailadres is reeds in gebruik.<br>";
            invalid += 1;
             }
           }
  });


    }

    }

    if (invalid != 0) {
        return false;
    }

    else {
        return true;
    }
}

</script>

这是我的validation.php文件：

<?php
header('content-type: text/json');

//no need to continue if there is no value in the POST username
if(!isset($_POST['email']))
    exit;

//initialize our PDO class. You will need to replace your database credentials respectively
$db = new PDO('mysql:host=localhost;dbname=cheapgamer','root','',array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));

//prepare our query.
$query = $db->prepare('SELECT * FROM members WHERE email = :email');
//let PDO bind the username into the query, and prevent any SQL injection attempts.
$query->bindParam(':email', $_POST['email']);
//execute the query
$query->execute();

//return the json object containing the result of if the username exists or not. The $.post in our jquery will access it.
echo json_encode(array('exists' => $query->rowCount() > 0));
?>

验证工作完全正常，只是当唯一的错误是电子邮件地址已经存在于数据库中时。

提前致谢！

丹尼斯

Answer 1

创建一个函数，并将你想要停止的javascript代码停止，直到ajax完成。

现在从ajax success函数内部调用该函数。因此，在ajax完成之前，代码不会被执行。

希望这有效。

Answer 2

AJAX请求，正如其名称所示，是异步的，因此您的代码将继续执行。您可以通过始终在false上返回function registervalidation来解决此问题，并且在PHP的有效响应后，您可以从表单中调用方法submit()。

var checkmail = $('#registeremail').val();
$.ajax({
  url: "validation.php",
  type: 'POST',
  data: 'email=' + checkmail,
  success: function(result){
    if (result != null){
      var red = document.getElementById("register-error").innerHTML;
      document.getElementById("register-error").innerHTML = red + "Dit emailadres is reeds in gebruik.<br>";
      invalid += 1;
    } else {
      // Call $(form).submit();
    }
  }
});

现在，请记住，您必须重构onSubmit属性，否则它会一遍又一遍地执行。

我的Javascript没有等待ajax调用完成

2 个答案: