如何用纯JavaScript拦截HTMLFormElement提交，类似XMLHttpRequest拦截方式？

当然可以！完全能用纯JavaScript实现对HTMLFormElement提交请求的拦截，思路和拦截XMLHttpRequest有点类似，但表单提交的触发场景更多样，得针对性处理。下面我就给你拆解具体的实现方式：

核心思路：覆盖表单的提交行为 #

表单提交主要有两种触发路径：用户点击提交按钮（或按回车）触发的submit事件，以及直接调用form.submit()方法。我们需要从这两个维度入手拦截。

1. 拦截用户触发的提交（比如点击按钮、回车提交） #

这种场景下，我们可以通过监听表单的submit事件，阻止默认行为后自定义处理逻辑——比如收集数据、修改参数、手动发起请求等等。

示例代码：

// 定位到目标表单
const targetForm = document.querySelector('#your-form-id');

targetForm.addEventListener('submit', function(e) {
  // 先阻止浏览器默认的表单提交行为
  e.preventDefault();
  
  // 这里写你的拦截逻辑：比如收集表单数据
  const formData = new FormData(this);
  const submitData = Object.fromEntries(formData);
  
  console.log('拦截到表单提交，数据：', submitData);
  
  // 如果你需要手动发起请求，用fetch或者XHR都可以
  fetch(this.action, {
    method: this.method,
    body: formData,
    headers: {
      // 按需设置请求头，比如表单是enctype为application/x-www-form-urlencoded的话可能不需要额外设置
    }
  })
  .then(res => res.json())
  .then(result => {
    console.log('请求返回结果：', result);
    // 这里处理成功后的页面逻辑，比如更新内容、提示用户
  })
  .catch(err => {
    console.error('请求出错：', err);
  });
});

2. 拦截通过form.submit()方法触发的提交 #

上面的事件监听没法拦截直接调用form.submit()的情况——因为这个方法不会触发submit事件。这时候我们就需要像拦截XHR那样，覆盖原生的submit方法。

示例代码：

// 先保存原生的submit方法，避免后续无法调用原生行为
const originalFormSubmit = HTMLFormElement.prototype.submit;

// 覆盖原生的submit方法
HTMLFormElement.prototype.submit = function() {
  // 这里是你的拦截逻辑
  console.log('拦截到通过submit()方法触发的提交，表单信息：', this);
  
  // 如果你想直接阻止提交，就直接return，不调用原生方法
  // return;
  
  // 如果你想自定义处理后再提交，先做自己的逻辑
  const formData = new FormData(this);
  // 比如给表单加额外参数
  formData.append('intercepted-tag', 'yes');
  
  // 处理完后，调用原生方法继续提交（如果需要的话）
  originalFormSubmit.call(this);
};

全局拦截所有表单提交（类似XHR全局拦截） #

如果你想全局拦截页面上所有表单的提交，不管是事件触发还是方法调用，可以把上面两种方式结合起来：

// 全局监听所有表单的submit事件（用捕获阶段确保不遗漏）
document.addEventListener('submit', function(e) {
  const form = e.target;
  if (form instanceof HTMLFormElement) {
    e.preventDefault();
    console.log('全局拦截到表单submit事件，表单：', form);
    // 这里写全局拦截逻辑...
  }
}, true);

// 全局覆盖所有表单的submit方法
const originalFormSubmit = HTMLFormElement.prototype.submit;
HTMLFormElement.prototype.submit = function() {
  console.log('全局拦截到form.submit()调用，表单：', this);
  // 全局拦截逻辑...
  // 需要继续提交的话，调用originalFormSubmit.call(this);
};

一些注意点 #

• 手动发起请求时，要注意表单的method、action、enctype属性，确保请求和原生提交的行为一致（比如enctype为multipart/form-data时，用FormData作为请求体就没问题）。
• 对于动态创建的表单，用全局事件委托（比如上面监听document的submit事件）会更稳妥，不用每次创建表单都绑定事件。
• 覆盖原生方法后，如果后续需要恢复原生行为，记得保存好原始方法的引用。

内容的提问来源于stack exchange，提问作者Emerson P. Ballen