formaction属性不支持双路径提交，必须用两个独立按钮分别实现预览（type="button"+JS）和发布（type="submit"+formaction），或通过JS动态切换formaction值。
formaction 属性本身不支持“双路径”提交
HTML 的 button 元素的 formaction 是单值属性，浏览器只认一个 URL。所谓“预览 + 发布”两个动作，本质是不同语义的操作：一个是只读渲染（通常不走表单提交），另一个才是真实数据提交。硬塞两个地址进 formaction 不会生效，还会被忽略或报解析错误。
用两个独立 button 分别控制预览和发布
最直接、语义清晰、无障碍友好的做法是拆成两个按钮，各自绑定不同行为：
- 预览按钮用
type="button"，不触发表单提交，通过 JS 拿到表单数据后发 GET/POST 到预览接口（比如/preview），跳转或弹窗展示结果 - 发布按钮保留
type="submit"，设置formaction="/publish"，走原生表单提交 - 两者共享同一份
form，但行为解耦，避免状态混淆
示例：
<form id="post-form" action="/publish" method="POST"> <input name="title" /> <textarea name="content"></textarea> <button type="button" onclick="previewPost()">预览</button> <button type="submit" formaction="/publish">发布</button> </form>
previewPost() 函数里可调用 new FormData(document.getElementById('post-form')) 提取数据，再 fetch 到预览端点。
立即学习“前端免费学习笔记（深入）”；
如果非要“一个按钮切换行为”，得靠 JS 动态改 formaction
适用场景：UI 要求只有一个按钮，点击一次预览，再点一次才发布（类似草稿 → 发布流程）。这时不能依赖静态 formaction，必须用 JS 控制：
- 初始按钮设
type="submit"，但formaction留空或指向预览地址 - 首次点击时阻止默认提交（
event.preventDefault()），调用预览逻辑，并标记“已预览” - 第二次点击时，把
formaction改成/publish，再手动触发form.submit() - 注意：修改
formaction后必须在调用submit()前确保 DOM 已更新，否则旧值仍生效
关键代码片段：
let hasPreviewed = false;
function handlePublishClick(e) {
const btn = e.target;
const form = document.getElementById('post-form');
if (!hasPreviewed) {
e.preventDefault();
previewPost(); // 自定义预览函数
hasPreviewed = true;
btn.textContent = '确认发布';
return;
}
btn.formAction = '/publish';
form.submit(); // 此时才真正提交
}
容易被忽略的兼容性和副作用
formaction 在 IE10+ 和所有现代浏览器都支持，但有几点实际踩坑点：
- 如果按钮不在
form内部，formaction无效——它只对属于某个form的submit按钮起作用（可通过form属性显式关联） - 动态修改
formaction后，Chrome 和 Firefox 行为一致；但 Safari 对快速连续点击的处理略保守，建议加防抖或禁用按钮过渡态 - 预览请求若用 GET 传大量内容，可能超 URL 长度限制，应改用 POST + body 传参，后端返回 HTML 片段或跳转链接
- 服务端预览接口必须做 CSRF 校验绕过或单独签名校验，否则和发布共用同一套防护会出问题
真正的难点不在怎么写按钮，而在于预览数据是否与发布时完全一致——比如富文本编辑器的 HTML 渲染、Markdown 解析、图片上传临时路径替换，这些都要在预览阶段模拟发布流程的中间态，否则用户看到的和最终发出去的对不上。
