表单提交失败后保留用户输入并重新渲染页面，核心是阻止默认提交行为，用event.preventdefault()拦截submit事件，通过fetch发送请求并解析后端errors，调用setcustomvalidity等方法恢复校验提示与ui状态，同时缓存file输入、同步csrf token及防重复提交标记。
表单提交失败后如何保留用户输入并重新渲染页面
直接刷新页面（window.location.reload()）会清空所有已填内容，这不是“重新加载”的本意；真正的做法是阻止默认提交行为，在 JS 中捕获错误后手动恢复表单状态。
用 event.preventDefault() 阻止默认提交并手动处理响应
浏览器原生表单提交是全页跳转，一旦失败就无法控制 DOM 状态。必须用 JS 拦截，否则连错误信息都拿不到。
- 给
<form></form>绑定submit事件，第一时间调用event.preventDefault() - 用
fetch()或XMLHttpRequest发送数据，检查响应状态码和 JSON 错误字段 - 若后端返回
{ "success": false, "errors": { "email": "邮箱已被注册" } }，就遍历errors对象，用document.querySelector('[name="email"]').setCustomValidity("邮箱已被注册")触发校验提示 - 不要手动
.value = ...赋值——某些控件（如<textarea></textarea>、带 Vue/React 的受控组件）可能失效；优先用input事件或框架机制同步
后端返回 4xx/5xx 时如何避免丢失文件上传字段
如果表单含 <input type="file">，JS 提交后不能靠 input.files 二次读取（浏览器安全限制），必须在提交前缓存原始 FileList 或转为 base64/Blob。
- 提交前用
const fileInput = document.querySelector('[name="avatar"]'); const savedFiles = fileInput.files;保存引用 - 失败后不能直接
fileInput.files = savedFiles（只读属性），需用fileInput.outerHTML = fileInput.outerHTML重置 DOM 节点，再用input事件模拟用户选择（仅限调试，生产环境建议用隐藏 input + label 模拟上传按钮） - 更稳妥的做法：提交前把文件转成
FormData，失败后不重置 input，而是把错误信息显示在旁边，让用户决定是否重试
服务端渲染页面（如 PHP/SSR）中如何回传表单数据
如果是传统服务端渲染（非纯前端 AJAX），关键在于让后端把原始 POST 数据重新塞进模板变量里，而不是依赖 JS 恢复。
- PHP 示例：提交失败时，不跳转，而是
include 'form.php';并在模板中用<input value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"> - 注意对所有输出做
htmlspecialchars()，防止 XSS；日期、布尔等类型要额外转换（如checked="= $_POST['agree'] ? 'checked' : '' ?>"） - CSRF token 必须每次生成新值，并在失败渲染时一并传入，否则重试会因 token 过期再次失败
最易被忽略的是错误边界：AJAX 提交失败后，既要恢复 UI 状态，也要还原网络请求上下文（如防重复提交的 loading 状态、按钮禁用逻辑）。否则用户狂点提交按钮，可能发出多份相同请求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
