如何在PHP注册表单触发验证错误时用JavaScript回填表单字段

你当前的代码仅实现了表单数据存入localStorage的逻辑，但缺少页面加载时检测错误状态并回填数据的核心逻辑，同时存储时机也需要优化。以下是具体修改方案：

1. 完善JavaScript逻辑（script.js） #

添加页面加载时的错误检测与数据回填功能，同时优化数据存储时机为输入实时存储，避免提交时序问题：

// 存储表单数据到localStorage
function storeFormData() {
    const formData = {
        name: document.getElementById('name').value,
        email: document.getElementById('email').value,
        uid: document.getElementById('uid').value
    };
    localStorage.setItem('formData', JSON.stringify(formData));
}

document.addEventListener('DOMContentLoaded', function() {
    // 给输入框绑定实时存储监听，用户输入时自动保存
    const inputIds = ['name', 'email', 'uid'];
    inputIds.forEach(id => {
        document.getElementById(id).addEventListener('input', storeFormData);
    });

    // 页面加载时自动检查是否需要回填数据
    fillFormOnError();
});

// 仅在验证错误时回填表单字段
function fillFormOnError() {
    const urlParams = new URLSearchParams(window.location.search);
    const errorStatus = urlParams.get('error');
    
    // 仅当存在错误且不是成功状态时回填
    if (errorStatus && errorStatus !== 'none') {
        const savedData = localStorage.getItem('formData');
        if (savedData) {
            const formData = JSON.parse(savedData);
            document.getElementById('name').value = formData.name || '';
            document.getElementById('email').value = formData.email || '';
            document.getElementById('uid').value = formData.uid || '';
        }
    } else if (errorStatus === 'none') {
        // 注册成功时清除localStorage中的旧数据，避免下次打开表单显示历史内容
        localStorage.removeItem('formData');
    }
}

2. 修正PHP错误提示的HTML结构 #

你的PHP输出的<p>标签未正确闭合，修改后保证HTML结构合法：

<?php
if (isset($_GET["error"])){
    if ($_GET["error"] == "emptyinput") {
        echo "<p>Fill in all fields!</p>";
    }
    else if ($_GET["error"] == "invaliduid") {
        echo "<p>Choose a proper username!</p>";
    }
    else if ($_GET["error"] == "invalidemail") {
        echo "<p>Choose a proper email!</p>";
    }
    else if ($_GET["error"] == "passwordnotmatch") {
        echo "<p>Passwords don't match!</p>";
    }
    else if ($_GET["error"] == "stmtfailed") {
        echo "<p>Something went wrong, try again!</p>";
    }
    else if ($_GET["error"] == "usernametaken") {
        echo "<p>Username already taken!</p>";
    }
    else if ($_GET["error"] == "none") {
        echo "<p>You have signed up!</p>";
    }
}
?>

3. 移除按钮的冗余触发事件 #

因为已经实现输入实时存储，不需要再通过按钮点击触发存储，移除按钮的onclick属性：

<button type="submit" name="submit">Sign Up</button>

逻辑说明 #

• 实时存储：用户在输入框中输入内容时，数据会自动存入localStorage，避免仅在提交时存储可能出现的时序问题；
• 错误回填：页面加载时检测URL中的error参数，只有存在验证错误时才从localStorage读取数据并回填到表单；
• 清理机制：注册成功（error=none）时自动清除localStorage中的旧数据，防止下次打开表单显示历史内容。

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