Form表单使用onsubmit但return false后仍然提交？

阿淼~

已于 2023-09-15 09:39:42 修改

阅读量2.2k

点赞数 2

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 html html5 java

于 2022-02-20 22:05:42 首次发布

本文链接：https://blog.youkuaiyun.com/Miao_Yue_LIN/article/details/123036798

本文探讨了在HTML表单中使用onsubmit事件处理函数的问题。当尝试通过`onsubmit=checkUserProduct()`阻止表单提交时，即使`checkUserProduct()`返回false，表单仍然会提交。原因在于onsubmit默认返回true，除非明确改变其返回值。正确的做法是将onsubmit写为`onsubmit=return checkUserProduct()`，确保方法的返回值影响表单提交行为。这类似于Java中方法调用的逻辑，理解这一点对于前端开发中的表单控制至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们可能会是如下使用onsubmit

<form action="" method="post" class="form-horizontal" onsubmit="checkUserProduct()">

我们试图在checkUserProduct()中return false来阻止表单的提交。实际上的效果是即使return false ，表单还是会提交。但是如果改成 οnsubmit=”return checkUserProduct()”就没有问题了。
原来onsubmit属性就像是这个html对象的一个方法名，其值（字符串）就是其方法体，默认返回true；如果你没有改变他的返回值，那么他将默认返回true。

类似java里面如下二图

onsubmit（）方法调用checkUserProduct（）方法，虽然checkUserProduct（）方法return false，但是onsubmit（）不受影响，本身还是返回默认值。我们只执行了checkUserProduct（）方法，没有对onsubmit（）结果进行任何处理。
在这里插入图片描述