jQuery 阻止表单提交

最新推荐文章于 2023-12-26 14:15:37 发布

原创最新推荐文章于 2023-12-26 14:15:37 发布 · 4.5k 阅读

5 ·

CC 4.0 BY-SA版权

jQuery/JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了三种阻止HTML表单默认提交行为的方法：使用onsubmit返回false、利用jQuery的return false和preventDefault()函数。这些技巧对于前端开发者来说至关重要，能够帮助他们更好地控制表单行为。

1. 利用 οnsubmit="return false" 阻止表单提交

<form action="" method="get" onsubmit="return false">
    <input type="text" name="name" value="">

    <button>提交表单</button>
</form>

2. 利用 return false 阻止

<form action="" method="get">
    <input type="text" name="name" value="">

    <button>提交表单</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
    jQuery(function () {
        $("button").on("click",function () {
            return false;
        })
    });
</script>

3. 利用 preventDefault() 阻止表单提交

<form action="" method="get">
    <input type="text" name="name" value="">

    <button>提交表单</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
    jQuery(function () {
        $("form").submit(function (e) {
            e.preventDefault();
        });
    });
</script>