这是一个html5错误，你仍然可以将按钮作为提交(如果你想涵盖javascript和非javascript用户)使用它:

     <button type="submit" onclick="return false"> Register </button>

这样你将取消提交，但仍然做任何你在jquery或javascript函数中做的事情，并为没有javascript的用户提交。

如果你有<input />

使用它

<input type="button"/>

如果你有<button>btn</button>

使用它

<button type="button">btn</button>

不久前，我需要一些非常相似的东西……我明白了。

因此，我在这里介绍的是如何在不进行任何验证的情况下通过JavaScript提交表单并仅在用户按下按钮(通常是发送按钮)时执行验证的技巧。

对于这个示例，我将使用一个最小的表单，只有两个字段和一个提交按钮。

记住你想要什么: 从JavaScript，它必须能够提交没有任何检查。但是，如果用户按下这样的按钮，则只有在通过验证时才必须进行验证并发送表单。

通常情况下，所有内容都是这样开始的(我删除了所有不重要的额外内容):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

看到表单标签没有onsubmit="…"(记住，这是一个不拥有它的条件)。

问题是表单总是被提交，无论onclick返回true还是false。

如果我改变type="submit"为type="button"，它似乎工作，但不是。它从不发送表单，但这很容易做到。

最后我用了这个:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

在函数Validator上，返回True;是，我还添加了一个JavaScript提交语句，类似于:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""只是JavaScript的getElementById, name=""只是为了它出现在POST数据上。

这样它就能按我的需要工作。

我把这只是为了那些不需要表单上的onsubmit函数，但当用户按下按钮时进行一些验证的人。

为什么我不需要onsubmit的表单标签?容易，在其他JavaScript部分，我需要执行提交，但我不希望有任何验证。

原因:如果用户是执行我想要的提交，需要验证，但如果它是JavaScript，有时我需要执行提交，而这样的验证可以避免它。

这听起来可能很奇怪，但想想看，例如:在登录时……有一些限制……比如不允许使用PHP会话，也不允许使用cookie !

因此任何链接都必须转换为这样的表单提交，这样登录数据才不会丢失。 当还没有完成登录时，它也必须工作。因此，必须对链接执行任何验证。 但是，如果用户没有输入user和pass这两个字段，我想向用户显示一条消息。所以如果少了一个表格，一定不能发送!这就是问题所在。

请看问题:只有当用户按下按钮时，一个字段为空时，表单不能被发送，如果它是JavaScript代码，它必须能够被发送。

如果我在表单标签上做onsubmit的工作，我需要知道它是用户还是其他JavaScript。由于不能传递参数，因此不可能直接进行验证，因此有些人添加了一个变量来告知是否必须进行验证。验证函数的第一件事是检查变量值等…如果太复杂，代码就不能说明真正需要的是什么。

所以解决方案是不要在form标签上使用onsubmit。欧洲工商管理学院把它放到了真正需要的地方——按钮上。

另一方面，为什么把提交代码，因为概念上我不想提交验证。我真的需要按钮验证。

不仅代码更加清晰，而且它也在它必须在的地方。记住这一点: -我不希望JavaScript来验证表单(这必须总是由PHP在服务器端完成) -我想显示给用户一个消息告诉所有字段不能为空，这需要JavaScript(客户端)

那么为什么有些人(认为或告诉我)必须在onsumbit验证上完成呢?不，从概念上讲，我没有在客户端进行onsumbit验证。我只是在按下按钮后做一些事情，所以为什么不让它实现呢?

代码和风格完美地完成了任务。在任何JavaScript，我需要发送的形式，我只是放:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

当我不需要它时，它会跳过验证。它只是发送表单并加载另一个页面，等等。

但是如果用户点击了提交按钮(又名type="button" not type="submit")，在让表单提交之前就会完成验证，如果无效就不会发送。

我们希望这能帮助其他人不要尝试长而复杂的代码。如果不需要，不要使用onsubmit，使用onclick。但是要记住将type="submit"改为type="button"，并且请不要忘记使用JavaScript执行submit()。

这里有一个简单的方法:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

你可以简单地使用jQuery获取按钮的引用，并像下面这样防止它的传播:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});

只需要添加e.c preventdefault ();在你的方法中应该阻止你的页面提交表单。

function myFunc(e){
       e.preventDefault();
}

根据MDN网络文档

Event接口的preventDefault()方法告诉用户 代理，如果事件未显式处理，则其默认值 不应像通常那样考虑行动。的 事件继续像往常一样传播，除非它的侦听器之一 调用stopPropagation()或stopImmediatePropagation () 它终止了传播。