无法修改原文件，如何通过custom.js禁用带onsubmit校验的表单提交按钮

我来帮你搞定这个问题！既然你只能通过custom.js添加代码，没法修改原HTML和JS文件，咱们可以分两步实现需求：

核心问题拆解 #

你遇到的关键问题是：原生的form.submit()方法不会触发表单上绑定的onsubmit事件，所以直接调用它时原有的validate()校验逻辑没跑起来。同时你还要禁用提交按钮，不让用户手动点击提交。

具体实现代码 #

把这段代码放到你的custom.js里就行：

// 等页面DOM加载完成再执行操作，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取目标表单和提交按钮
  const targetForm = document.getElementById('form');
  const submitButton = targetForm.querySelector('input[type="submit"]');

  // 第一步：禁用提交按钮，阻止用户手动点击
  submitButton.disabled = true;

  // 第二步：重写表单的submit方法，确保触发原校验逻辑
  const originalSubmit = targetForm.submit;
  targetForm.submit = function() {
    // 调用原有的validate校验函数
    if (validate()) {
      // 校验通过，调用原生submit方法提交表单
      originalSubmit.call(this);
    } else {
      // 校验不通过，终止提交流程
      return false;
    }
  };
});

为什么这么做？ #

• 禁用按钮：直接通过DOM操作给提交按钮设置disabled = true，简单直接，用户没法手动点击提交，但你依然可以通过代码调用form.submit()。
• 重写submit方法：原生form.submit()会跳过onsubmit事件，所以我们手动调用原有的validate()，只有校验通过才执行原生的提交逻辑，完美兼容原有的校验规则。

可选优化：根据输入状态启用按钮 #

如果想在用户输入姓名后自动启用按钮（提升用户体验），可以加这段代码：

// 监听姓名输入框的输入事件
document.getElementById('name').addEventListener('input', function() {
  // 输入框有内容时启用按钮，否则保持禁用
  submitButton.disabled = this.value.trim() === '';
});

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