本文讲解如何通过 php 服务端验证与 html 结构配合，在表单提交失败时，将各字段的错误消息精准、即时地显示在对应输入框下方，避免页面跳转或信息错位。
本文讲解如何通过 php 服务端验证与 html 结构配合，在表单提交失败时，将各字段的错误消息精准、即时地显示在对应输入框下方，避免页面跳转或信息错位。
在 Web 表单开发中，仅靠 HTML5 的 required 或 type="email" 属性无法满足复杂业务校验（如西里尔字母支持、自定义邮箱格式等），必须结合 PHP 进行服务端验证。但若验证失败后直接 echo 错误信息，或未重新渲染表单，用户将看不到错误提示位置——这是初学者常见的结构性失误。
核心问题在于：错误变量（如 $nameErr）只有在 PHP 验证逻辑执行后才被赋值，而原始 HTML 表单是静态渲染的，未包裹在 PHP 条件逻辑中。因此，需确保：
✅ 错误变量在表单 HTML 渲染前已计算完成；
✅ 表单 HTML 本身位于 PHP 的条件分支内（即验证失败时重新输出带错误信息的表单）；
✅ 每个 <div class="error"> 紧邻对应 <input> 或 <textarea>，保证 DOM 结构语义清晰。
✅ 正确实现方式（服务端 + HTML 耦合）
将整个表单 HTML 移入 PHP 的 else 分支中，并确保所有验证逻辑在表单输出前执行：
<?php
require "vendor/autoload.php";
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
// 初始化错误变量
$emailErr = $nameErr = $messErr = "";
$valid = true;
// 仅当有 POST 数据时执行验证（防止首次访问报 Notice）
if ($_SERVER["REQUEST_METHOD"] === "POST") {
$nameSanitized = filter_var(trim($_POST['name']), FILTER_SANITIZE_STRING);
$emailSanitized = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
$messageSanitized = filter_var(trim($_POST['message']), FILTER_SANITIZE_STRING);
// 姓名校验：仅允许拉丁、西里尔字母及空格
if (!preg_match('/^[\p{Latin}\p{Cyrillic} ]*$/u', $nameSanitized)) {
$nameErr = "Only Latin and Cyrillic letters and white space allowed in the name field.";
$valid = false;
}
// 必填项校验
if (empty($nameSanitized) || empty($messageSanitized)) {
$messErr = "Name and message are required.";
$valid = false;
}
// 邮箱格式校验（更推荐使用 FILTER_VALIDATE_EMAIL）
if (!filter_var($emailSanitized, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Please enter a valid email address.";
$valid = false;
}
// 验证通过则发送邮件
if ($valid) {
try {
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = "smtp.gmail.com";
$mail->SMTPAuth = true;
$mail->Username = SMTP_USERNAME;
$mail->Password = SMTP_PASSWORD;
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
$mail->Port = 587;
$mail->setFrom($emailSanitized, $nameSanitized);
$mail->addAddress("your-email@example.com", "Recipient");
$mail->Subject = "new message";
$mail->Body = "Name: $nameSanitized\nEmail: $emailSanitized\n\n$messageSanitized";
$mail->send();
header("Location: sent.html");
exit;
} catch (Exception $e) {
echo "Mailer Error: " . $mail->ErrorInfo;
}
}
}
?>
<!-- 表单始终在此处渲染：验证失败时显示带错误信息的表单；首次访问或验证成功后跳转，不显示此块 -->
<form method="POST" action="send-email.php">
<label for="name">Name *</label>
<input type="text" name="name" id="name" placeholder="Name*" value="<?= htmlspecialchars($nameSanitized ?? '') ?>" required>
<div class="error"><?= htmlspecialchars($nameErr) ?></div>
<label for="email">Email *</label>
<input type="email" name="email" id="email" placeholder="Email*" value="<?= htmlspecialchars($emailSanitized ?? '') ?>" required>
<div class="error"><?= htmlspecialchars($emailErr) ?></div>
<label for="message">Your Message *</label>
<textarea name="message" id="message" placeholder="Your Message*" required><?= htmlspecialchars($messageSanitized ?? '') ?></textarea>
<div class="error"><?= htmlspecialchars($messErr) ?></div>
<button type="submit" name="submit" class="button">Send</button>
</form>⚠️ 关键注意事项
- 安全输出：使用 htmlspecialchars() 包裹所有 echo 到 HTML 中的变量（包括 $nameSanitized），防止 XSS 攻击；
- 保留用户输入：通过 value 和 textarea 内容回填已提交的数据，提升用户体验；
- 邮箱校验优化：原正则 /^[a-zA-Z0-9_]+@.../ 过于严格且不标准，建议改用 filter_var($email, FILTER_VALIDATE_EMAIL)；
- 首屏无错误：将表单置于验证逻辑之后、无条件渲染，而非仅放在 else 中——这样可统一入口，避免重复代码，也便于后续添加客户端 JS 实时校验；
- CSS 提示样式：为 .error 添加样式（如 color: #d32f2f; font-size: 0.875rem; margin-top: 4px; min-height: 1.2em;），确保错误信息可见且不破坏布局。
通过以上结构，用户提交无效数据后，页面不跳转，错误消息精准出现在对应字段下方，形成完整、专业、安全的表单反馈闭环。
