Question

我正在进行简单的表单验证。我正在使用AJAX来验证用户的电子邮件。当我在console.log（）中从php脚本返回值时，它会返回正确的值，但是ajax脚本...根据我从控制台日志中可以看出的内容运行两次。

也许我这样做是100％错误的。但我过去做过这件事并且有效。我似乎无法使用基本的Javascript让任何Ajax调用工作，因为我遇到了同样的错误。

其他奇怪的东西..我也在检查字段是否为空并将表单返回为false。当表格没有完全填写时，我在控制台中看到了正确的输出。当我完全填写表格时。 AJAX查询执行不正确的行为。

function registrationCheck(){
var firstName = document.forms["registerForm"]["firstName"];
var lastName = document.forms["registerForm"]["lastName"];
var newAccount = document.forms["registerForm"]["newAccount"];
var email = document.forms["registerForm"]["email"];
var password = document.forms["registerForm"]["password"];
var verifyPassword = document.forms["registerForm"]["verifyPassword"];

var error = document.getElementById("registerError");
var errorMessage = "";

var formValidation = true;

if (firstName.value == "") {
    firstName.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}
if (lastName.value == "") {
    lastName.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}
if (newAccount.value == "") {
    newAccount.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}
if (email.value == "") {
    email.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}else{
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var answer = xmlhttp.responseText.trim();
            if (answer == "true") {
                errorMessage = "Email is in use";
                formValidation = false;
                console.log(formValidation);
                console.log("Answer:" + answer);
            }

        }
    }
    xmlhttp.open("GET", "../ajax.php?e=" + email.value, true);
    xmlhttp.send();
    console.log(formValidation);
}
if (password.value == "") {
    password.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}
if (verifyPassword.value == "") {
    verifyPassword.style.borderColor="red";
    errorMessage = "Please fill in all fields.";
    formValidation = false;
}


if (formValidation) {
    return true;
}else{
    error.innerHTML = "Please fill in all fields";
    return false;
}

}

<form action="../register" method="POST" role="form" name="registerForm" onsubmit="return registrationCheck()">
    <div class="form-group">
        <label for="firstName">First Name:</label>
        <input type="text" name="firstName" class="form-control" id="" placeholder="First name">
    </div>
    <div class="form-group">
        <label for="lastName">Last Name:</label>
        <input type="text" name="lastName" class="form-control" id="" placeholder="Last name">
    </div>
    <div class="form-group">
        <label for="email">Email:</label>
        <input type="text" name="email" class="form-control" id="" placeholder="Email Address">
    </div>
    <div class="form-group">
        <label for="newAccount">Account:</label>
        <input type="text" name="newAccount" class="form-control" id="" placeholder="Account name">
    </div>
    <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" name="password" class="form-control" id="" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="verifyPassword">Verify Password:</label>
        <input type="password" name="verifyPassword" class="form-control" id="" placeholder="Confirm your password">
    </div>
    <button type="submit" class="btn btn-primary">Register Account</button>
</form>

AJAX调用无法正常运行（Javascript / PHP）

0 个答案: