如何禁止用户通过JS .submit()手动提交表单（不禁用JavaScript）

核心问题原因 #

原生form.submit()方法不会触发onsubmit事件，也不会自动执行HTML5表单验证逻辑，所以不管是机器人还是用户在控制台调用这个方法，都能直接绕过前端的所有校验。要解决这个问题，必须从"限制提交触发源"和"强制校验提交合法性"两个层面入手。

具体实现步骤 #

1. 给表单添加提交令牌字段

在表单内新增一个隐藏字段，用来标记当前提交是否合法：

<form method="post" enctype="multipart/form-data" action="example_action_page.php" id="contactForm">
    <!-- 原有表单字段保持不变 -->
    <input type="hidden" name="allowSubmit" id="allowSubmit" value="false">
    
    <tr>
        <td colspan="2">
            <input name="contact_us" id="saveForm" type="button" value="Submit" onclick="validateAndSubmit();">
            <input type="reset" name="reset" value="Reset">
        </td>
    </tr>
</form>

2. 修改验证与提交逻辑

将原来的验证函数改为包含令牌赋值的完整流程，确保只有验证通过后才允许提交：

function validateAndSubmit() {
    const form = document.getElementById('contactForm');
    const allowSubmitInput = document.getElementById('allowSubmit');

    // 第一步：执行HTML5原生表单验证
    if (!form.checkValidity()) {
        form.reportValidity(); // 触发浏览器原生的验证提示
        return false;
    }

    // 第二步：执行你的AJAX特殊字段验证
    fetch('/your-special-validation-api', {
        method: 'POST',
        body: new FormData(form)
    })
    .then(res => res.json())
    .then(data => {
        if (data.valid) {
            // 验证通过，设置合法提交令牌
            allowSubmitInput.value = "true";
            // 调用表单提交
            form.submit();
        } else {
            alert('特殊字段验证失败，请检查后重试');
        }
    })
    .catch(err => {
        alert('验证请求失败，请稍后再试');
    });
}

3. 重写表单submit方法，强制校验令牌

直接重写原生submit方法，让所有调用form.submit()的行为都必须先通过令牌校验：

const form = document.getElementById('contactForm');
// 保存原生submit方法引用
const originalSubmit = form.submit;

form.submit = function() {
    const isAllowed = document.getElementById('allowSubmit').value === "true";
    if (!isAllowed) {
        // 非法提交，触发验证提示并阻止
        form.reportValidity();
        alert('请通过指定按钮提交表单');
        return false;
    }
    // 合法提交，调用原生方法
    originalSubmit.call(this);
    // 提交后重置令牌，防止重复提交
    document.getElementById('allowSubmit').value = "false";
};

4. 后端二次校验（必须！）

前端校验只能防误操作，无法对抗恶意请求，所以必须在后端也校验令牌的合法性：

// example_action_page.php
if (!isset($_POST['allowSubmit']) || $_POST['allowSubmit'] !== 'true') {
    header('HTTP/1.1 403 Forbidden');
    exit('非法提交请求');
}

// 后续正常处理表单数据...

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