本文介绍如何将 php 表单验证错误消息精准显示在对应输入字段右侧（而非页面顶部），通过服务端逻辑与 html 结构协同实现清晰友好的用户反馈，并兼顾 html 与 php 文件分离的工程实践。

本文介绍如何将 php 表单验证错误消息精准显示在对应输入字段右侧（而非页面顶部），通过服务端逻辑与 html 结构协同实现清晰友好的用户反馈，并兼顾 html 与 php 文件分离的工程实践。

在 Web 表单开发中，将错误提示紧邻对应输入框展示（如“Date is empty!”显示在日期选择器右侧），能显著提升用户体验和表单可修复性。这需要服务端验证逻辑与前端 HTML 结构紧密配合，而非仅依赖全局错误区域。

✅ 核心思路：错误数组 + 字段级条件渲染

关键在于 分离验证逻辑与视图渲染：

• process.php 负责接收 POST 数据、执行校验、收集错误到关联数组（如 $errors['date'] = 'Date is empty!';）；
• index.php 在每个输入字段旁，通过 PHP 条件判断是否输出对应错误信息（如 <?php echo $errors['date'] ?? ''; ?>）。

⚠️ 注意：原始代码中 echo "*Incorrect time" 等直接输出会破坏 HTML 结构，且未保存错误状态供视图复用——必须改为赋值到 $errors 数组。

✅ 改进后的完整流程

1. 重构 process.php（专注验证与数据处理）

<?php
$errors = []; // 初始化空错误数组
$u_date = $u_starttime = $u_endtime = $u_name = $u_email = $u_text = '';

if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // 数据过滤与预赋值（避免 Notice 错误）
    $u_date       = filter_input(INPUT_POST, 'date', FILTER_SANITIZE_STRING) ?: '';
    $u_starttime  = filter_input(INPUT_POST, 'starttime', FILTER_SANITIZE_STRING) ?: '';
    $u_endtime    = filter_input(INPUT_POST, 'endtime', FILTER_SANITIZE_STRING) ?: '';
    $u_name       = filter_input(INPUT_POST, 'user_name', FILTER_SANITIZE_STRING) ?: '';
    $u_email      = filter_input(INPUT_POST, 'user_email', FILTER_SANITIZE_EMAIL) ?: '';
    $u_text       = filter_input(INPUT_POST, 'user_text', FILTER_SANITIZE_STRING) ?: '';

    // 字段级验证
    if (empty($u_date)) {
        $errors['date'] = 'Date is required.';
    }
    if (empty($u_name)) {
        $errors['name'] = 'Name is required.';
    }
    if (!filter_var($u_email, FILTER_VALIDATE_EMAIL)) {
        $errors['email'] = 'Valid email is required.';
    }
    if (empty($u_text)) {
        $errors['text'] = 'Message cannot be empty.';
    }

    // 时间逻辑校验（注意：字符串比较需谨慎，建议转为时间戳）
    if (!empty($u_starttime) && !empty($u_endtime) && strtotime($u_starttime) >= strtotime($u_endtime)) {
        $errors['time'] = 'End time must be after start time.';
    }

    // 无错误则插入数据库
    if (empty($errors)) {
        require_once('db-connect.php');
        $stmt = $mysqli->prepare("INSERT INTO users_data (date, start_time, end_time, user_name, user_email, user_message) VALUES(?, ?, ?, ?, ?, ?)");
        $stmt->bind_param('ssssss', $u_date, $u_starttime, $u_endtime, $u_name, $u_email, $u_text);
        if ($stmt->execute()) {
            $success = "Hello, {$u_name}! Your request has been submitted.";
        } else {
            $errors['db'] = 'Database error: ' . $mysqli->error;
        }
    }
}
?>

2. 更新 index.php（结构化渲染 + 错误定位）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Form</title>
    <style>
        .error { color: #d32f2f; font-size: 0.875em; margin-left: 8px; }
        .form-group { margin-bottom: 16px; }
        .form-row { display: flex; align-items: center; }
        .form-row label { width: 80px; }
        .form-row input, .form-row select, .form-row textarea { flex: 1; }
    </style>
</head>
<body>
    <?php require('process.php'); ?>
    <h1>Form</h1>

    <!-- 成功提示（可选） -->
    <?php if (isset($success)): ?>
        <div style="color:green; margin-bottom:16px;"><?php echo htmlspecialchars($success); ?></div>
    <?php endif; ?>

    <form method="post" action="">
        <div class="form-group">
            <div class="form-row">
                <label>Date:</label>
                <input type="date" name="date" value="<?php echo htmlspecialchars($u_date); ?>" />
                <span class="error"><?php echo $errors['date'] ?? ''; ?></span>
            </div>
        </div>

        <div class="form-group">
            <div class="form-row">
                <label>Start:</label>
                <select name="starttime" style="margin-right:15px">
                    <option value="09:00:00" <?php echo $u_starttime === '09:00:00' ? 'selected' : ''; ?>>09:00</option>
                    <option value="17:00:00" <?php echo $u_starttime === '17:00:00' ? 'selected' : ''; ?>>17:00</option>
                </select>
                <label>End:</label>
                <select name="endtime">
                    <option value="18:00:00" <?php echo $u_endtime === '18:00:00' ? 'selected' : ''; ?>>18:00</option>
                </select>
                <span class="error"><?php echo $errors['time'] ?? ''; ?></span>
            </div>
        </div>

        <div class="form-group">
            <div class="form-row">
                <label>Name:</label>
                <input type="text" name="user_name" placeholder="Name" value="<?php echo htmlspecialchars($u_name); ?>" />
                <span class="error"><?php echo $errors['name'] ?? ''; ?></span>
            </div>
        </div>

        <div class="form-group">
            <div class="form-row">
                <label>Mail:</label>
                <input type="email" name="user_email" placeholder="Mail" value="<?php echo htmlspecialchars($u_email); ?>" />
                <span class="error"><?php echo $errors['email'] ?? ''; ?></span>
            </div>
        </div>

        <div class="form-group">
            <div class="form-row">
                <label>Message:</label>
                <textarea name="user_text" rows="4"><?php echo htmlspecialchars($u_text); ?></textarea>
                <span class="error"><?php echo $errors['text'] ?? ''; ?></span>
            </div>
        </div>

        <input type="submit" value="Send" />
    </form>

    <h3 class="txt_center">DB Output <span id="curdate">
        <?php require('calendar.php'); ?>
    </span></h3>
</body>
</html>

✅ 关键注意事项

• 安全第一：所有输出到 HTML 的变量（如 $u_name, $u_email）必须经 htmlspecialchars() 转义，防止 XSS。
• 保留用户输入：通过 value="<?php echo ... ?>" 和 <textarea><?php echo ... ?></textarea> 回填已提交内容，减少重复填写。
• 错误数组初始化：务必在验证前声明 $errors = []，否则未触发验证时直接访问 $errors['xxx'] 会报 Undefined index。
• HTML5 增强（可选）：可叠加 required, type="email" 等原生属性作为客户端第一道防线，但不可替代服务端验证。
• 时间比较优化：字符串直接比较 '17:00:00' > '18:00:00' 在 PHP 中可能不符合预期，应使用 strtotime() 或 DateTime 对象进行逻辑判断。

通过以上结构化设计，你既能保持 PHP 与 HTML 的职责分离，又能实现专业级的字段级错误反馈——真正让用户“一眼看到哪里错了，马上改对”。