如何防止表单被提交？

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

html

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

脚本

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

在此处返回 false 不会被执行，表单将被提交。您还应该调用 preventDefault 来阻止 Ajax 表单提交的默认表单操作。

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

在这种情况下，即使有错误，表单也不会提交！

或者，可以使用 try...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;" >

或者

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

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

Demo

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

请read more about Inline Events vs Event Listeners (addEventListener and IE's attachEvent) here。因为我无法比 Chris Baker 解释更多。

两者都是正确的，但它们本身都不是“最好的”，开发人员选择使用这两种方法可能是有原因的。

---

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

常量元素 = document.querySelector('form'); element.addEventListener('submit', event => { event.preventDefault(); // 实际逻辑，例如验证表单 console.log('Form submit cancelled.'); }); 提交

我认为这比定义与 onsubmit 属性内联的 submit 事件处理程序更好，因为它分离了网页逻辑和结构。维护逻辑与 HTML 分离的项目要容易得多。请参阅：Unobtrusive JavaScript。

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

---

以下作品截至目前（在 chrome 和 firefox 中测试）：

<form onsubmit="event.preventDefault(); return validateMyForm();">

其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键点是使用名称 event。我们不能用于例如 e.preventDefault()

---

试试这个...

HTML 代码

<form class="submit">
    <input type="text" name="text1"/>
    <input type="text" name="text2"/>
    <input type="submit" name="Submit" value="submit"/>
</form>

jQuery 代码

$(function(){
    $('.submit').on('submit', function(event){
        event.preventDefault();
        alert("Form Submission stopped.");
    });
});

或者

$(function(){
    $('.submit').on('submit', function(event){
       event.preventDefault();
       event.stopPropagation();
       alert("Form Submission prevented / stopped.");
    });
});

---

var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  return false;
}

---

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

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

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

---

要遵循 unobtrusive JavaScript 编程约定，并根据 DOM 的加载速度，最好使用以下内容：

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

如果您正在使用库，则使用 onload 或 DOM 准备好连接事件。

$(function() { var $form = $('#my-form'); $form.removeAttr('onsubmit'); $form.submit(function(ev) { // 快速验证示例... $form .children('input[type="text"]').each(function(){ if($(this).val().length == 0) { alert('你缺少一个字段'); ev .preventDefault(); } }); }); });标签{显示：块； } #my-form > input[type="text"] { 背景：青色； }

你的名字 你的姓氏

另外，我总是使用 action 属性，因为有些人可能会运行一些像 NoScript 这样的插件，这会破坏验证。如果您使用 action 属性，至少您的用户将被服务器基于后端验证重定向。另一方面，如果您使用 window.location 之类的东西，情况会很糟糕。

---

您可以将 eventListner 添加到表单中，即 preventDefault() 并将表单数据转换为 JSON，如下所示：

const formToJSON = elements => [].reduce.call(elements, (data, element) => { data[element.name] = element.value; return data; }, {}); const handleFormSubmit = event => { event.preventDefault();常量数据 = formToJSON(form.elements);控制台.log（数据）； // const odata = JSON.stringify(data, null, " ");常量 jdata = JSON.stringify(数据);控制台.log(jdata); (async () => { const rawResponse = await fetch('/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },正文：jdata }); const content = await rawResponse.json(); console.log(content); })(); }; const form = document.forms['myForm']; form.addEventListener('submit', handleFormSubmit);

复选框：

数字：

密码：

类型：A B C

Textarea: 在这里写点什么。

选择： Value A Value B 值 C

提交：

---

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

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

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

---

这是我的回答：

<form onsubmit="event.preventDefault();searchOrder(event);">
...
</form>
<script>
const searchOrder = e => {
    e.preventDefault();
    const name = e.target.name.value;
    renderSearching();

    return false;
}
</script>

我在 onsubmit 上添加 event.preventDefault(); 并且它有效。

---