拦截form表单的提交

Posted 2021-02-09 alanabc

简单的记录一下这个实用js技巧：拦截form表单提交。假设有一个表单：

<form id="form_id" method="post">
    <label for="username">用户名</label>
    <input name="username" type="text">

    <label for="password">密码</label>
    <input name="password" type="password">

    <button type="submit">登录</button>
    <button type="reset">重置</button>
</form>

使用如下的js，就可以在点击登录按钮的时候拦截表单，让表单无法提交。接下来，你可以写上一些代码，比如验证一下表单项，或者为表单添加一个表单项，然后再提交表单。

$(‘form#form_id button[type="submit"]‘).click(function (e) {
    let event = e || window.event;
    event.preventDefault(); // 兼容标准浏览器
    window.event.returnValue = false; // 兼容IE6~8

    // 你的代码，可验证表单项或添加表单项等...
    console.log("我在拦截表单后打印了一个log。")

    // 要提交表单可以：
    // $(‘form#form_id‘).submit();
});

还可以：

let form = document.getElementById(‘form_id‘);
form.onsubmit = function(e){
    console.log(e);
    console.log("我在拦截表单后打印了一个log。")
    // 阻止表单提交：
    return false;
};