如何将表单输入错误信息显示在对应输入字段旁（PHP+HTML分离）

云原生阿岚

2026-8-23

问题描述

我希望将表单的输入错误提示显示在对应输入字段旁边，但当前错误信息显示在页面顶部。我找不到HTML与PHP代码分离架构下的类似实现示例，也不确定自身代码是否存在问题，以下是我的index.php和process.php代码：

index.php

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>testpage</title>
    </head>

    <body>
    <?php
require('process.php');
?>
        <h1>Form</h1>
        
        <form method="post" action="">
        <div>  Date : <input type="date" name="date"/><br />
</div>
            <div>
                   <label>Start:</label>
                    <select name="starttime" style="margin-right:15px" >
                         <option value="09:00:00">09:00</option>
                         <option value="17:00:00">17:00</option>
                    </select>
                   <label>End:</label>
                         <select name="endtime">
                      <option value="18:00:00">18:00</option>
                     </select>
                  <br>
            </div>
            <div>
            Name : <input type="text" name="user_name" placeholder="Name" /><br />
</div>
            Mail : <input type="email" name="user_email" placeholder="Mail" /><br />
            Message : <textarea name="user_text"></textarea><br />
            <input type="submit" value="Send" />
        </form>
        <h3 class=" txt_center">DB Output <span id="curdate">
       <?php require('calendar.php');
        ?>
            <!-- <script type="text/javascript" src="js/time-select.js"></script> -->
    </body>
</html>

process.php

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $u_date = filter_var($_POST["date"]);
    $u_starttime = $_POST["starttime"];
    $u_endtime = $_POST["endtime"];
    $u_name = filter_var($_POST["user_name"]); 
    $u_email = filter_var($_POST["user_email"], FILTER_SANITIZE_EMAIL);
    $u_text = filter_var($_POST["user_text"]);

    $error = array();
    if (empty($u_date)){
        $error['date'] = 'Date is empty!';
        }
    elseif ( $u_starttime > $u_endtime ){
        echo "*Incorrect time";
    }        
    elseif (empty($u_name)){
        echo "Name is empty.";
    }
    else{
    require_once('db-connect.php');
    
    $statement = $mysqli->prepare("INSERT INTO users_data (date, start_time, end_time, user_name, user_email, user_message) VALUES(?, ?, ?, ?, ?, ?)"); 
    
    $statement->bind_param('ssssss', $u_date, $u_starttime, $u_endtime,  $u_name, $u_email, $u_text); 
    
    if($statement->execute()){
    print "Hello, " . $u_name . "!, request is complete!";
    }else{
    print $mysqli->error; 
    }
}
}
?>

解决方案

核心问题分析

process.php直接用echo输出错误，因require('process.php')放在页面开头，错误会显示在顶部
错误未按字段归类存储，无法在对应输入框旁精准输出
使用elseif串联判断，单个错误出现后后续校验终止，无法一次性展示所有问题

1. 重构process.php：收集错误而非直接输出

将所有错误存入数组，统一在前端对应位置调用，同时完善校验逻辑：

<?php
$error = []; // 初始化错误数组，避免未提交时变量未定义
$success_msg = '';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // 安全获取并过滤输入
    $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)) {
        $error['date'] = '日期不能为空！';
    }
    if ($u_starttime >= $u_endtime) {
        $error['time'] = '结束时间必须晚于开始时间！';
    }        
    if (empty($u_name)) {
        $error['name'] = '姓名不能为空！';
    }
    if (!empty($u_email) && !filter_var($u_email, FILTER_VALIDATE_EMAIL)) {
        $error['email'] = '邮箱格式不正确！';
    }

    // 无错误时执行数据库操作
    if (empty($error)) {
        require_once('db-connect.php');
        
        $statement = $mysqli->prepare("INSERT INTO users_data (date, start_time, end_time, user_name, user_email, user_message) VALUES(?, ?, ?, ?, ?, ?)"); 
        $statement->bind_param('ssssss', $u_date, $u_starttime, $u_endtime,  $u_name, $u_email, $u_text); 
        
        if ($statement->execute()) {
            $success_msg = "您好，" . $u_name . "！提交已完成！";
        } else {
            $error['db'] = '数据库错误：' . $mysqli->error;
        }
    }
}
?>

2. 修改index.php：在对应字段旁输出错误

将错误信息放在输入框旁边，同时保留用户输入值（避免重复填写）：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>testpage</title>
        <style>
            .error { color: #dc3545; font-size: 0.9em; margin-left: 8px; }
            .success { color: #28a745; margin: 10px 0; padding: 8px; background: #f8f9fa; }
        </style>
    </head>

    <body>
        <?php require('process.php'); ?>
        
        <!-- 显示成功提示 -->
        <?php if (!empty($success_msg)): ?>
            <div class="success"><?php echo $success_msg; ?></div>
        <?php endif; ?>
        
        <!-- 显示数据库错误 -->
        <?php if (isset($error['db'])): ?>
            <div class="error"><?php echo $error['db']; ?></div>
        <?php endif; ?>

        <h1>表单提交</h1>
        
        <form method="post" action="">
            <div>
                日期 : 
                <input type="date" name="date" value="<?php echo isset($_POST['date']) ? htmlspecialchars($_POST['date']) : ''; ?>" />
                <?php if (isset($error['date'])): ?>
                    <span class="error"><?php echo $error['date']; ?></span>
                <?php endif; ?>
                <br />
            </div>
            
            <div>
                <label>开始时间:</label>
                <select name="starttime" style="margin-right:15px" >
                    <option value="09:00:00" <?php echo isset($_POST['starttime']) && $_POST['starttime'] == '09:00:00' ? 'selected' : ''; ?>>09:00</option>
                    <option value="17:00:00" <?php echo isset($_POST['starttime']) && $_POST['starttime'] == '17:00:00' ? 'selected' : ''; ?>>17:00</option>
                </select>
                
                <label>结束时间:</label>
                <select name="endtime">
                    <option value="18:00:00" <?php echo isset($_POST['endtime']) && $_POST['endtime'] == '18:00:00' ? 'selected' : ''; ?>>18:00</option>
                </select>
                
                <?php if (isset($error['time'])): ?>
                    <span class="error"><?php echo $error['time']; ?></span>
                <?php endif; ?>
                <br>
            </div>
            
            <div>
                姓名 : 
                <input type="text" name="user_name" placeholder="姓名" value="<?php echo isset($_POST['user_name']) ? htmlspecialchars($_POST['user_name']) : ''; ?>" />
                <?php if (isset($error['name'])): ?>
                    <span class="error"><?php echo $error['name']; ?></span>
                <?php endif; ?>
                <br />
            </div>
            
            <div>
                邮箱 : 
                <input type="email" name="user_email" placeholder="邮箱" value="<?php echo isset($_POST['user_email']) ? htmlspecialchars($_POST['user_email']) : ''; ?>" />
                <?php if (isset($error['email'])): ?>
                    <span class="error"><?php echo $error['email']; ?></span>
                <?php endif; ?>
                <br />
            </div>
            
            <div>
                留言 : 
                <textarea name="user_text"><?php echo isset($_POST['user_text']) ? htmlspecialchars($_POST['user_text']) : ''; ?></textarea>
                <br />
            </div>
            
            <input type="submit" value="提交" />
        </form>
        
        <h3 class="txt_center">数据库输出 <span id="curdate">
            <?php require('calendar.php'); ?>
        </span></h3>
        <!-- <script type="text/javascript" src="js/time-select.js"></script> -->
    </body>
</html>

关键优化点

错误集中存储到$error数组，实现精准定位输出
取消elseif改用独立if，支持一次性显示所有字段错误
保留用户输入值（用htmlspecialchars防止XSS攻击），提升体验
新增邮箱格式校验，完善表单逻辑
用CSS美化错误/成功提示，更直观

内容的提问来源于stack exchange，提问作者Deema

如何将表单输入错误信息显示在对应输入字段旁（PHP+HTML分离）

核心问题分析 #

1. 重构process.php：收集错误而非直接输出 #

2. 修改index.php：在对应字段旁输出错误 #

关键优化点 #

核心问题分析

1. 重构process.php：收集错误而非直接输出

2. 修改index.php：在对应字段旁输出错误

关键优化点