尝试使用 PHP 和 Ajax 进行表单验证，不工作

Question

我一直在尝试弄清楚如何进行 php 表单验证并使用 ajax 来获取结果，这样我就不必刷新页面了。我是 ajax 新手，遇到了困难。 这是我的registration.php表单

<h1>Sign Up</h1>
<form id="registration_form" method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="first_name">First name</label>
                <input type="text" class="form-control" id="first_name" name="first_name" onblur="validate('first_name', this.value)" placeholder="First name">
            </div>
        </div>
        <div id="textFirstName" class="col-md-6">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="last_name">Last name</label>
                <input type="text" class="form-control" id="last_name" name="last_name" onblur="validate('last_name', this.value)" placeholder="Last name">
            </div>
        </div>
        <div id="textLastName" class="col-md-6">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="email1">Email address</label>
                <input type="email" class="form-control" id="email1" name="email1" onblur="validate('email1', this.value)" placeholder="Email">
            </div>
        </div>
        <div id="textEmail" class="col-md-6">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="Password1">Password</label>
                <input type="password" class="form-control" id="password1" name="password1" onblur="validate('password1', this.value)" placeholder="Password">
            </div>
        </div>
        <div id="textPass1" class="col-md-6">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="Password2">Confirm Password</label>
                <input type="password" class="form-control" id="password2" name="password2" onblur="validate('password2', this.value)" placeholder="Retype Password">
            </div>
        </div>
        <div id="textPass2" class="col-md-6">

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <button type="submit" class="btn btn-default">Submit</button>
        </div>
        <div class="col-md-6">
        &nbsp;
        </div>
    </div>
</form>

这是我的验证 php 脚本：

 <?php
$value = $_POST['query'];
$formfield = $_POST['field'];
// Check Valid or Invalid first name when user enters user name in username     input field.
if ($formfield == "first_name") {
    if (strlen($value) < 1) {
        echo "<p style=\"color:red\">Error: Must be 1+ letters</p>";
    } else {
        echo "<p style=\"color:green\">Valid</p>";
        $_SESSION['reg']['first_name'] = $value;
    }
}
if ($formfield == "last_name") {
    if (strlen($value) < 1) {
        echo "<p style=\"color:red\">Error: Must be 1+ letters</p>";
    } else {
        echo "<p style=\"color:green\">Valid</p>";
        $_SESSION['reg']['last_name'] = $value;
    }
}
// Check Valid or Invalid password when user enters password in password input field.
if ($formfield == "password1") {
    if (strlen($value) < 8) {
        echo "<p style=\"color:red\">Error: Password too short. Must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
    }
    else if (!preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $value)){
        echo "<p style=\"color:red\">Error: Your password must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
    }
    else {
        echo "<p style=\"color:green\">Your password is good.</p>";
        $_SESSION['reg']['password1'] = $value;
    }
 }
 if ($formfield == "password2") {
    if (strlen($value) < 8) {
        echo "<p style=\"color:red\">Error: Password too short. Must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
    }
    else if (!preg_match("#.*^(?=.{8,20})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).*$#", $value)){
        echo "<p style=\"color:red\">Error: Your password must be at least 8 characters long, contain one lower case letter, one uppercase letter, and one number.</p>";
    }
    else if ($_SESSION['password1'] != $value) {
        echo "<p style=\"color:red\">Error: Your passwords don't match.</p>";
    }
    else {
        echo "<p style=\"color:green\">Your password is good.</p>";
    }
}
// Check Valid or Invalid email when user enters email in email input field.
if ($formfield == "email1") {
    if (!preg_match("/([\w\-]+\@[\w\-]+\.[\w\-]+)/", $value)) {
        echo "<p style=\"color:red\">Invalid email.</p>";
    } else {
        echo "<p style=\"color:red\">Valid</p>";
        $_SESSION['reg']['email1'] = $value;
    }
}

?>

这是我的 ajax javascript 文件：

function checkForm() {
// Fetching values from all input fields and storing them in variables.
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var password1 = document.getElementById("password1").value;
var password2 = document.getElementById("password2").value;
var email = document.getElementById("email1").value;
//Check input Fields Should not be blanks.
if (first_name == '' || last_name == '' || password1 == '' || password2 == '' || email1 == '') {
alert("Fill All Fields");
} else {
//Notifying error fields
var textFirstName = document.getElementById("first_name");
var textLastName = document.getElementById("last_name");
var textPass1 = document.getElementById("password1");
var textPass2 = document.getElementById("password2");
var textEmail = document.getElementById("email1");
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate alert.
str1 = textFirstName.innerHTML; str2 = textLastName.innerHTML; str3 = textPass1.innerHTML; str4 = textPass2.innerHTML; str5 = textEmail.innerHTML;
if (str1.substr(0,4) == 'Error' || str2.substr(0,4) == 'Error' || str3.substr(0,4) == 'Error' || str4.substr(0,4) == 'Error' || str5.substr(0,4) == 'Error') {
alert("Fill Valid Information");
} else {
//Submit Form When All values are valid.
document.getElementById("myForm").submit();
}
}
}
// AJAX code to check input field values when onblur event triggerd.
function validate(field, query) {
var xmlhttp;
if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = "Validating..";
} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try Again</a> the page.";
}
}
xmlhttp.open("POST", "lib/validate_registration_form.php?field=" + field + "&query=" + query, false);
xmlhttp.send();
}

当我在表单中输入值时，无论我输入的是有效信息还是无效信息，都没有响应。我确定问题出在带有ajax的JS文件中，但我不知道它是什么。任何帮助将不胜感激。

Answer 1

你有两个问题：

首先，在您的 html/javascript 中，onblur 事件调用

validate('first_name', this.value)

但是没有 ID = first_name 的 HTML 元素，你的 div 被称为 textFirstName

所以你应该用适当的参数值改变你的onblur，比如

validate('textFirstName', this.value)

接下来，您对 ajax 使用 POST 方法，但将参数发送到存储在 $_GET 数组中的 URL 中

改变：

<?php
$value = $_POST['query'];
$formfield = $_POST['field'];

收件人：

<?php
$value = $_GET['query'];
$formfield = $_GET['field'];

最后说明：您可能希望在您的 php 脚本中使用isset($_GET['query']) 以避免undefined 的通知消息或至少一种调试方式：

if (!isset($_GET['query']))
{
    die ("missing parameter, report to admin that he should debug the JS");
}

编辑 根据您的评论，这里是如何发送 POST 数据

var params = "field=" + field + "&query=" + query;
xmlhttp.open("POST", "lib/validate_registration_form.php", false);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.send(params);