表单提交失败后怎么优雅地恢复用户输入？

Des.娅廷提问于 2026-03-23 20:33:24 阅读 8

交互

我在做一个带验证的注册表单，用户填完点提交，如果后端返回错误（比如邮箱已注册），页面就刷新了，用户得重新填所有字段，体验特别差。有没有办法在报错后保留用户已经填的内容？

我试过用 history.back() 返回上一页，但有时候会触发重复提交，而且浏览器不一定缓存输入值。也想过把数据存 localStorage，但感觉太重了，而且涉及敏感信息不太安全。

现在前端是用原生 JS 写的，结构大概这样：

<form id="registerForm">
  <input type="email" name="email" required>
  <input type="password" name="password" required>
  <button type="submit">注册</button>
</form>

求个轻量又靠谱的恢复方案，别让用户崩溃……

我来解答赞 1 收藏

反馈

1 条解答

诸葛庆敏 Lv1

懒人方案，用 FormData 和事件监听，提交失败时回填数据。

document.getElementById('registerForm').addEventListener('submit', function(event) {

    event.preventDefault();

    var formData = new FormData(this);

    fetch(this.action, { method: 'POST', body: formData })

        .then(response => response.json())

        .catch(error => {

            formData.forEach((value, key) => {

                this.querySelector([name="${key}"]).value = value;

            });

        });

});

2026-03-23 21:04