如何在表单提交失败后正确显示对应字段的错误提示信息

花韻仙語

发布时间：2026-02-18 17:12:01

568人浏览过

来源于php中文网

原创

如何在表单提交失败后正确显示对应字段的错误提示信息

本文讲解如何通过 php 服务端验证与 html 结构配合，在表单提交失败时，将各字段的错误消息精准、即时地显示在对应输入框下方，避免页面跳转或信息错位。

本文讲解如何通过 php 服务端验证与 html 结构配合，在表单提交失败时，将各字段的错误消息精准、即时地显示在对应输入框下方，避免页面跳转或信息错位。

在 Web 表单开发中，仅靠 HTML5 的 required 或 type="email" 属性无法满足复杂业务校验（如西里尔字母支持、自定义邮箱格式等），必须结合 PHP 进行服务端验证。但若验证失败后直接 echo 错误信息，或未重新渲染表单，用户将看不到错误提示位置——这是初学者常见的结构性失误。

核心问题在于：错误变量（如 $nameErr）只有在 PHP 验证逻辑执行后才被赋值，而原始 HTML 表单是静态渲染的，未包裹在 PHP 条件逻辑中。因此，需确保：
✅ 错误变量在表单 HTML 渲染前已计算完成；
✅ 表单 HTML 本身位于 PHP 的条件分支内（即验证失败时重新输出带错误信息的表单）；
✅ 每个

紧邻对应或

，保证 DOM 结构语义清晰。<h3>✅ 正确实现方式（服务端 + HTML 耦合）</h3>
<p>将整个表单 HTML 移入 PHP 的 else 分支中，并确保所有验证逻辑在表单输出前执行：</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1670" title="editGPT"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/969/633/68b6d5d59d50f613.jpeg" alt="editGPT"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1670" title="editGPT">editGPT</a>
                                                                        <p>一款浏览器插件，让ChatGPT修改、校对英语文章</p>
                                                                </div>
                                                                <a href="/ai/1670" title="editGPT" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><pre class="brush:php;toolbar:false;"><?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></pre><h3>⚠️ 关键注意事项</h3>
<ul>
<li>
<strong>安全输出</strong>：使用 htmlspecialchars() 包裹所有 echo 到 HTML 中的变量（包括 $nameSanitized），防止 XSS 攻击；</li>
<li>
<strong>保留用户输入</strong>：通过 value 和 textarea 内容回填已提交的数据，提升用户体验；</li>
<li>
<strong>邮箱校验优化</strong>：原正则 /^[a-zA-Z0-9_]+@.../ 过于严格且不标准，建议改用 filter_var($email, FILTER_VALIDATE_EMAIL)；</li>
<li>
<strong>首屏无错误</strong>：将表单置于验证逻辑之后、无条件渲染，而非仅放在 else 中——这样可统一入口，避免重复代码，也便于后续添加客户端 JS 实时校验；</li>
<li>
<strong>CSS 提示样式</strong>：为 .error 添加样式（如 color: #d32f2f; font-size: 0.875rem; margin-top: 4px; min-height: 1.2em;），确保错误信息可见且不破坏布局。</li>
</ul>
<p>通过以上结构，用户提交无效数据后，页面不跳转，错误消息精准出现在对应字段下方，形成完整、专业、安全的表单反馈闭环。</p>

如何让自定义滚动条宽度在缩放和窗口调整时保持固定？

如何正确为带过滤器的 HTML 表格添加无障碍支持（ARIA 与语义化实践）

如何为 Vue/Vuetify 表格单元格值变更添加动画效果

如何为 Vuetify 表格单元格值变更添加动画效果

如何在单 HTML 文件中实现点击弹窗外部区域关闭弹窗

相关专题

html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容，可以阅读本专题下面的文章。

532

2023.10.23

HTML与HTML5的区别

HTML与HTML5的区别：1、html5支持矢量图形，html本身不支持；2、html5中可临时存储数据，html不行；3、html5新增了许多控件；4、html本身不支持音频和视频，html5支持；5、html无法处理不准确的语法，html5能够处理等等。想了解更多HTML与HTML5的相关内容，可以阅读本专题下面的文章。

457

2024.03.06

html5从入门到精通汇总

想系统掌握HTML5开发？本合集精选全网优质学习资源，涵盖免费教程、实战项目、视频课程与权威电子书，从基础语法到高级特性（Canvas、本地存储、响应式布局等）一应俱全，适合零基础小白到进阶开发者，助你高效入门并精通HTML5前端开发。

203

2025.12.30

html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验，不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签，还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

216

2025.12.30

html5空格代码怎么写

在HTML5中，空格不能直接通过键盘空格键实现，需使用特定代码。本合集详解常用空格写法： （不间断空格）、&ensp;（半个中文空格）、&emsp;（一个中文空格）及CSS的white-space属性等方法，帮助开发者精准控制页面排版，避免因空格失效导致布局错乱，适用于新手入门与实战参考。

2025.12.30

html5怎么做网站教程

想从零开始学做网站？这份《HTML5怎么做网站教程》合集专为新手打造！涵盖HTML5基础语法、页面结构搭建、表单与多媒体嵌入、响应式布局及与CSS3/JavaScript协同开发等核心内容。无需编程基础，手把手教你用纯HTML5创建美观、兼容、移动端友好的现代网页。附实战案例+代码模板，快速上手，轻松迈出Web开发第一步！

164

2025.12.31

HTML5建模教程

想快速掌握HTML5模板搭建？本合集汇集实用HTML5建模教程，从零基础入门到实战开发全覆盖！内容涵盖响应式布局、语义化标签、Canvas绘图、表单验证及移动端适配等核心技能，提供可直接复用的模板结构与代码示例。无需复杂配置，助你高效构建现代网页，轻松上手前端开发！

2025.12.31

html5怎么使用

想快速上手HTML5开发？本合集为你整理最实用的HTML5使用指南！涵盖HTML5基础语法、主流框架（如Bootstrap、Vue、React）集成方法，以及无需安装、直接在线编辑运行的平台推荐（如CodePen、JSFiddle）。无论你是新手还是进阶开发者，都能轻松掌握HTML5网页制作、响应式布局与交互功能开发，零配置开启高效前端编程之旅！

2025.12.31