使用.addEventListener()将事件监听器附加到表单，然后在事件上调用.preventDefault()方法:

const element = document.querySelector('form'); 元素。addEventListener('submit'， event => { event.preventDefault (); //实际的逻辑，例如验证表单 console.log('表单提交已取消'); })； < >形式 <按钮类型=“提交”> > < /按钮提交 > < /形式

我认为这是一个比在onsubmit属性中定义一个提交事件处理程序更好的解决方案，因为它分离了网页逻辑和结构。在逻辑与HTML分离的情况下，维护项目要容易得多。参见:Unobtrusive JavaScript。

使用表单DOM对象的.onsubmit属性不是一个好主意，因为它会阻止您将多个提交回调函数附加到一个元素。参见addEventListener vs onclick ．

与其他答案不同，返回false只是答案的一部分。考虑这样一个场景:JS错误发生在return语句之前…

html

<form onsubmit="return mySubmitFunction(event)">
  ...
</form>

脚本

function mySubmitFunction()
{
  someBug()
  return false;
}

这里返回false将不会被执行，表单将以任何一种方式提交。还应该调用preventDefault来防止Ajax表单提交的默认表单操作。

function mySubmitFunction(e) {
  e.preventDefault();
  someBug();
  return false;
}

在这种情况下，即使有bug，表单也不会提交!

或者，尝试…可以使用Catch块。

function mySubmit(e) { 
  e.preventDefault(); 
  try {
   someBug();
  } catch (e) {
   throw new Error(e.message);
  }
  return false;
}

你可以像这样使用内联事件onsubmit

<form onsubmit="alert('stop submit'); return false;" >

Or

<script>
   function toSubmit(){
      alert('I will not submit');
      return false;
   }
</script>

<form onsubmit="return toSubmit();" >

Demo

在做大项目时，这可能不是一个好主意。您可能需要使用事件侦听器。

请阅读更多关于内联事件vs事件监听器(addEventListener和IE的attachEvent)在这里。因为我不能比克里斯·贝克解释得更清楚。

两者都是正确的，但没有一个是“最好的”，而且可能有 开发人员选择使用这两种方法的原因。

<form v-on:submit.prevent="yourMethodHere">

提交事件将不再重新加载页面。它运行你的方法。

来自vue文档:https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

为了防止表单提交，你只需要这样做。

<form onsubmit="event.preventDefault()">
    .....
</form>

通过使用上述代码，这将阻止您的表单提交。

为了遵循不引人注目的JavaScript编程惯例，并取决于DOM加载的速度，使用以下代码可能是个好主意:

<form onsubmit="return false;"></form>

然后使用onload或DOM ready(如果使用库)连接事件。

$(function() { var $form = $('#my-form'); $form.removeAttr('onsubmit'); $form.submit(function(ev) { // quick validation example... $form.children('input[type="text"]').each(function(){ if($(this).val().length == 0) { alert('You are missing a field'); ev.preventDefault(); } }); }); }); label { display: block; } #my-form > input[type="text"] { background: cyan; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="my-form" action="http://google.com" method="GET" onsubmit="return false;"> <label>Your first name</label> <input type="text" name="first-name"/> <label>Your last name</label> <input type="text" name="last-name" /> <br /> <input type="submit" /> </form>

此外，我总是使用动作属性，因为有些人可能有一些插件，如NoScript运行，然后会破坏验证。如果您正在使用action属性，至少您的用户将根据后端验证被服务器重定向。如果你使用window之类的东西。另一方面，地理位置会让事情变得糟糕。