var form = document.getElementById("idOfForm");
form.onsubmit = function() {
  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)在这里。因为我不能比克里斯·贝克解释得更清楚。

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

以下是目前为止的工作(在chrome和firefox测试):

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

其中validateMyForm()是一个函数，如果验证失败则返回false。关键是使用名称事件。我们不能使用例如e.c epreventdefault ()

为了遵循不引人注目的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之类的东西。另一方面，地理位置会让事情变得糟糕。

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

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

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

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

const formToJSON = elements => [].reduce.call(elements, (data, element) => { data[element.name] = element.value; return data; }, {}); const handleFormSubmit = event => { event.preventDefault(); const data = formToJSON(form.elements); console.log(data); // const odata = JSON.stringify(data, null, " "); const jdata = JSON.stringify(data); console.log(jdata); (async () => { const rawResponse = await fetch('/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: jdata }); const content = await rawResponse.json(); console.log(content); })(); }; const form = document.forms['myForm']; form.addEventListener('submit', handleFormSubmit); <form id="myForm" action="/" method="post" accept-charset="utf-8"> <label>Checkbox: <input type="checkbox" name="checkbox" value="on"> </label><br /><br /> <label>Number: <input name="number" type="number" value="123" /> </label><br /><br /> <label>Password: <input name="password" type="password" /> </label> <br /><br /> <label for="radio">Type: <label for="a">A <input type="radio" name="radio" id="a" value="a" /> </label> <label for="b">B <input type="radio" name="radio" id="b" value="b" checked /> </label> <label for="c">C <input type="radio" name="radio" id="c" value="c" /> </label> </label> <br /><br /> <label>Textarea: <textarea name="text_area" rows="10" cols="50">Write something here.</textarea> </label> <br /><br /> <label>Select: <select name="select"> <option value="a">Value A</option> <option value="b" selected>Value B</option> <option value="c">Value C</option> </select> </label> <br /><br /> <label>Submit: <input type="submit" value="Login"> </label> <br /><br /> </form>