给定JS代码中调用e.preventDefault()后如何提交表单

原有代码

form.addEventListener('submit', e => {
    e.preventDefault();
    validateInputs();
});

上述代码给表单绑定了submit事件监听器，回调中调用e.preventDefault()阻止表单默认提交行为后，执行validateInputs()输入校验方法，校验完成后正确提交表单的方式如下：

正确实现步骤 #

• 改造validateInputs方法，让它返回布尔类型的校验结果：所有输入项符合校验规则时返回true，存在校验不通过的项时返回false
• 在事件回调中接收校验返回值，判断如果校验通过，直接调用表单元素的原生submit()方法提交即可。

  注意：原生form.submit()方法不会重复触发绑定的submit事件监听器，不会造成死循环，不要手动派发submit事件来触发提交，会导致循环触发监听。

同步校验场景完整代码

form.addEventListener('submit', e => {
    e.preventDefault();
    const validatePass = validateInputs();
    if (validatePass) {
        // 校验通过，提交表单
        form.submit();
    }
    // 校验不通过无需额外操作，正常展示你在校验方法里写的错误提示即可
});

异步校验场景（比如接口验重）代码

如果你的validateInputs里包含接口请求这类异步逻辑，加上async/await处理即可：

form.addEventListener('submit', async e => {
    e.preventDefault();
    const validatePass = await validateInputs();
    if (validatePass) {
        form.submit();
    }
});

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