如何仅用HTML/CSS/PHP实现注册页错误提示与表单回显？

当然可以！完全只靠HTML、CSS和PHP就能实现你要的错误提示展示和表单数据回显功能，不需要额外的JavaScript。下面我结合你的代码给出具体实现方案：

一、核心思路 #

你当前的代码已经通过header跳转把错误类型和用户输入的有效数据通过URL参数传递回注册页了，接下来只需要在注册页（register.php）里：

1. 读取URL中的错误参数，匹配对应的提示文本并显示在表单底部
2. 读取URL中携带的用户输入数据，回显到对应的输入框中

二、具体实现步骤 #

1. 注册页（register.php）的修改 #

在页面顶部添加PHP代码来获取URL参数，然后在表单中对应位置回显数据，在表单底部显示错误提示：

<?php
// 初始化变量，用于回显用户输入
$uid = $_GET['uid'] ?? '';
$email = $_GET['mail'] ?? '';
$fname = $_GET['FirstName'] ?? '';
$lname = $_GET['LastName'] ?? '';

// 匹配错误提示文本
$errorMsg = '';
if (isset($_GET['error'])) {
    switch($_GET['error']) {
        case 'emptyfields':
            $errorMsg = '请填写所有必填字段！';
            break;
        case 'invalidemailandusername':
            $errorMsg = '用户名和邮箱格式都不正确！';
            break;
        case 'invalidemail':
            $errorMsg = '邮箱格式不正确！';
            break;
        case 'invalidusername':
            $errorMsg = '用户名只能包含字母和数字！';
            break;
        case 'invalidFirstName':
            $errorMsg = '名字只能包含字母！';
            break;
        case 'invalidLastName':
            $errorMsg = '姓氏只能包含字母！';
            break;
        case 'passwordsdonotmatch':
            $errorMsg = '两次输入的密码不一致！';
            break;
        case 'useralredadytaken':
            $errorMsg = '该用户名已被占用，请更换！';
            break;
        case 'emailalredadyinuse':
            $errorMsg = '该邮箱已被注册，请更换！';
            break;
        case 'sqlerror':
            $errorMsg = '服务器错误，请稍后重试！';
            break;
    }
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>注册</title>
    <style>
        /* 给错误提示加样式，让它更显眼 */
        .error-message {
            color: #dc3545;
            padding: 10px;
            border: 1px solid #dc3545;
            border-radius: 4px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <h1>注册账号</h1>
    <!-- 显示错误提示 -->
    <?php if (!empty($errorMsg)): ?>
        <div class="error-message"><?php echo $errorMsg; ?></div>
    <?php endif; ?>

    <form action="includes/register.inc.php" method="POST">
        <div>
            <label for="FirstName">名字:</label>
            <input type="text" id="FirstName" name="FirstName" value="<?php echo htmlspecialchars($fname); ?>">
        </div>
        <div>
            <label for="LastName">姓氏:</label>
            <input type="text" id="LastName" name="LastName" value="<?php echo htmlspecialchars($lname); ?>">
        </div>
        <div>
            <label for="uid">用户名:</label>
            <input type="text" id="uid" name="uid" value="<?php echo htmlspecialchars($uid); ?>">
        </div>
        <div>
            <label for="mail">邮箱:</label>
            <input type="email" id="mail" name="mail" value="<?php echo htmlspecialchars($email); ?>">
        </div>
        <div>
            <label for="pwd">密码:</label>
            <input type="password" id="pwd" name="pwd">
        </div>
        <div>
            <label for="pwd-repeat">确认密码:</label>
            <input type="password" id="pwd-repeat" name="pwd-repeat">
        </div>
        <button type="submit" name="submit-register">注册</button>
    </form>
</body>
</html>

2. 处理提交的PHP代码的小调整 #

注意你的原有代码里有几处拼写错误（比如useralredadytaken应为useralreadytaken，emailalredadyinuse应为emailalreadyinuse），建议修正这些拼写，避免错误提示匹配失败。修正后的部分跳转代码示例：

// 修正用户名已占用的跳转参数拼写
if ($resultCheck > 0) {
    header("Location: ../register.php?error=useralreadytaken&mail=" . $email);
    exit();
}
// ...
// 修正邮箱已占用的跳转参数拼写
if ($resultCheck > 0) {
    header("Location: ../register.php?error=emailalreadyinuse&uid=" . $username);
    exit();
}

三、关键细节说明 #

• htmlspecialchars()的作用：防止XSS攻击，把用户输入的特殊字符转义后再回显，比如用户输入<script>会被转义成<script>，避免恶意脚本执行。
• 错误提示样式：用CSS给错误提示添加醒目的样式，让用户一眼就能注意到问题。
• 密码不回显：密码字段我们刻意不保留输入内容，这是安全规范，避免密码泄露风险。

这样修改后，当用户提交表单出现错误时，页面会自动显示对应的错误提示，同时已经填写正确的字段会保留内容，不用用户重新输入所有信息。

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