在同一页面上显示 PHP 表单验证结果

我确信第一反应会是这样的：“这家伙没有谷歌吗？”是的，我承认这确实看起来是一个非常基本的概念，我已经尝试过并试图理解它，查找有关该主题的各种帖子和文章等，但一切都无济于事。也许你可以给我指出正确的方向？

我有一个基本的联系表单 (contact.html)，我使用外部 PHP 脚本 (contact.php) 运行它。这是 HTML 表单代码：

<form id="form1" action="contact.php" method="post">
<div class="form1">
<label>Your Name:</label>
<span><input type="text" name="name" /></span>
</div>
<div class="form1">
<label>Your School:</label>
<span><input type="text" name="school" /></span>
</div>
<div class="form1">
<label>Phone Number:</label>
<span><input type="text" name="phone" /></span>
</div>
<div class="form1">
<label>E-Mail Address:</label>
<span><input type="text" name="email" /></span>
</div>
<div class="form3">
<span><textarea cols="1" rows="1" name="message"></textarea></span>
</div>
<div class="wrapper">
<input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
</div>
</form>

PHP 脚本验证所有字段均已输入，然后处理表单：

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//Validate the name:
if (!empty($_POST['name'])) {
    $name = $_POST['name'];
} else {
    echo "You forgot to enter your name.<br>";
}

//Validate the school:
if (!empty($_POST['school'])) {
    $school = $_POST['school'];
} else {
    echo "You forgot to enter your school.<br>";
}

//Validate the e-mail:
if (!empty($_POST['email'])) {
    $email = $_POST['email'];
} else {
    echo "You forgot to enter your e-mail.<br>";
}

//Validate the message:
if (!empty($_POST['message'])) {
    $message = $_POST['message'];
} else {
    echo "You forgot to enter a message.";
}

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

}

?>

一切都很顺利，表单已按预期进行验证和处理。但是，我真的想对其进行设置，以便错误消息显示在同一页面上，或者至少刷新表单并包含错误消息。

我在其他演示中看到过这种做法（例如拉里·厄尔曼的书），但仍然不太清楚如何实现它。您能提供建议吗？最简单的方法是什么？

这是页面 URL（如果有帮助的话）：http://www.712jefferson.org/pal/contact.html

谢谢你！

我会为此使用 jQuery。 需进行的修改：

在 HTML 中： 将 id 添加到您的输入字段，以便您可以使用 jQuery“抓取”它们（您可以在$.post方法如下）。

<form id="form1" action="contact.php" method="post">
   <div class="form1">
      <label>Your Name:</label>
      <span><input id="name" type="text" name="name" /></span>
   </div>
   <div class="form1">
      <label>Your School:</label>
      <span><input id="school" type="text" name="school" /></span>
   </div>
   <div class="form1">
      <label>Phone Number:</label>
      <span><input id="phone" type="text" name="phone" /></span>
   </div>
   <div class="form1">
      <label>E-Mail Address:</label>
      <span><input id="email" type="text" name="email" /></span>
   </div>
   <div class="form3">
      <span><textarea id="message" cols="1" rows="1" name="message"></textarea></span>
   </div>
   <div class="wrapper">
      <input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
   </div>
</form>

在 PHP 中： 如果验证没有错误则回显：“成功”

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    echo "success";
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

Attach jQuery库到您的网站，并在括号内的 HTML 文件或附加到您网站的外部 *.js 文件中使用以下代码。 在您的 HTML 文件部分使用：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

jQuery 脚本：

$('#form1').submit(function() {
    event.preventDefault(); 
    $.post("contact.php", {name: $("#name").val(), school: $("#school").val(), phone: $("#phone").val(), email: $("#email").val(), message: $("#message").val()}, function(data){
        if(data !="success"){
            alert(data);
        }
    });
});

这将在警报窗口中显示您的错误消息，如果我没有记错的话，您的网站将不会重新加载。