如何在表单字段显示「用户名/邮箱不能为空！」并实现同页错误提示

我来帮你搞定这两个需求，咱们一步步调整代码，既实现字段提示，又能让错误信息在原页面友好显示：

1. 先修复后端逻辑（Conn.php） #

你原来的代码只处理了字段不为空的分支，空值情况没做处理才导致跳空白页。现在我们要把错误信息存入Session，再重定向回表单页面，而不是留空执行。

修改后的Conn.php代码：

<?php
session_start();

// 初始化错误信息
$error = '';

// 先判断是否是POST请求再处理
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 用??运算符避免未定义索引警告，同时trim去掉首尾空格
    $username = trim($_POST['username'] ?? '');
    $password = trim($_POST['password'] ?? '');
    $email = trim($_POST['email'] ?? '');
    $phone = trim($_POST['phone'] ?? '');

    // 验证用户名和邮箱是否为空
    if (empty($username) || empty($email)) {
        $error = '用户名/邮箱不能为空！';
        // 把错误信息存入Session，传递给表单页
        $_SESSION['error'] = $error;
        // 重定向回你的表单页面（替换成你实际的表单页路径，比如form.php）
        header('Location: form.php');
        exit; // 必须加exit，防止后续代码继续执行
    }

    // 这里放你原来的业务逻辑：比如验证密码、写入数据库等
    // ...
}
?>

2. 在表单页面显示错误信息 #

接下来要在用户填写的表单页面（比如form.php），读取Session里的错误信息并展示，同时可以加前端即时验证提升体验：

2.1 后端回显错误提示 #

在表单页面的顶部加入这段代码，用来显示后端返回的错误：

<?php
session_start();
// 检查是否有错误信息需要显示
if (isset($_SESSION['error'])) {
    echo '<div style="color: #dc3545; padding: 8px; border: 1px solid #f5c6cb; border-radius: 4px; margin-bottom: 15px;">' . $_SESSION['error'] . '</div>';
    // 显示后清除Session里的错误，避免用户刷新页面重复看到
    unset($_SESSION['error']);
}
?>

2.2 前端即时验证（可选，提升用户体验） #

在表单里加入JavaScript，提交前先做验证，不用等后端响应：

<form method="POST" action="Conn.php" onsubmit="return checkForm()">
    <div>
        <label>用户名：</label>
        <input type="text" name="username" id="username" placeholder="请输入用户名">
    </div>
    <div>
        <label>邮箱：</label>
        <input type="email" name="email" id="email" placeholder="请输入邮箱">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" name="password" placeholder="请输入密码">
    </div>
    <div>
        <label>电话：</label>
        <input type="tel" name="phone" placeholder="请输入电话">
    </div>
    <button type="submit" style="margin-top: 10px;">提交</button>
</form>

<script>
function checkForm() {
    const username = document.getElementById('username').value.trim();
    const email = document.getElementById('email').value.trim();
    
    if (!username || !email) {
        alert('用户名/邮箱不能为空！');
        return false; // 阻止表单提交
    }
    return true; // 验证通过，正常提交
}
</script>

核心要点总结 #

• 避免空白页：后端验证失败时，用header('Location: 表单页')跳回原页面，通过Session传递错误信息，再也不会出现空白页。
• 错误信息清理：显示错误后要清除Session里的错误，防止用户刷新页面重复看到提示。
• 前后端双重验证：前端验证让用户即时得到反馈，后端验证保证数据安全（毕竟前端验证可以被绕过）。

这样修改后，用户填写为空时，会先看到前端的弹窗提示；就算绕过前端验证，后端也会跳回表单页并显示醒目的红色错误提示，完美解决你的两个需求～

内容的提问来源于stack exchange，提问作者Ангел Хаджиев