阻止form表单提交，和提交时产生的问题总结

一、首先总结 阻止 form 表单提交的几种方法

1. <button> 提交时，type默认为submit，阻止提交将type改为button，即 type="button"

<form action="">
  <button type="button"></button> 
</form>

2. <input> 提交时，将type改为button，即 type="button"

<form action="">
  <input type="button" /> 
</form>

3. 在提交按钮上绑定点击事件，使用 preventDefault() 方法

<form action="">
  <input type="submit" value="button" onclick="func(event)" /> 
</form>

<script>
  function func(event) {
    event.preventDefault();
  }
</script>

4. 在提交按钮上，使用 return false;

<!--两种使用方法：
1） 在 onclick 上直接 return-->

<form action="">
  <input type="submit" value="button" onclick="return false" /> 
</form>

<!-- 2） 在onclick 上添加事件-->

<form action="">
  <input type="submit" value="button" onclick="return func()" /> 
    <!--注意是onclick内是return func();而不是简单的调用func()函数-->
</form>

<script>
  function func() {
    return false;
  }
</script>

5. 在form标签 的 onsubmit 事件上使用 return false;

   使用同 4 方法一致

<!--1） 在 onsubmit 上直接 return-->

<form action="">
  <input type="submit" onsubmit="return false" /> 
</form>

<!-- 2） 在 onsubmit 上添加事件-->

<form action="" onsubmit="return func()">
  <input type="submit"/> 
</form>

<script>
  function func() {
    return false;
  }
</script>

二、阻止表单提交时的使用场景

1. 在进行表单默认提交前加入验证等，通过了之后再进行默认提交

   此种情况下可使用上述 方法4 和 方法5 的第二种添加return事件

   即onclick="return func()" 和 onsubmit="return func()"

   然后在函数里进行提交前的验证或其他操作

<script>
  function func() {
    if (...) {
      return false;  //未满足条件就返回 false 禁止提交
    }
    return true;  //满足就 继续 默认提交操作
  }
</script>

2. 使用ajax提交，不使用默认提交

   此种情况下可使用上述 方法1、2、3 和 方法4、5 里的第一种直接return false

   然后在按钮的点击事件里添加自定义的ajax请求

注：具体使用哪种方法，需根据具体情况选择哦

三、表单提交时的问题记录

1. 按回车键自动提交

   发生场景： 页面采用ajax提交，采用上述阻止提交 方法2，页面只有一个单行input文本框提交，点击输入框后，按Enter键，页面进行了form默认的表单提交。

   产生原因： 这是form表单的一个默认行为，当form表单框里只有一个 type="text" 的input，那么点击Enter就会触发提交事件（ 注：如果含有textarea，button，等其他表单组件，但只要单行文本输入框，只有一个的话，点击Enter都会触发提交事件 ）。

   解决方法：
   1. 去除form标签，直接监听按钮点击事件，发送ajax，这样就不会产生Enter提交问题
   2. 额外添加一个不展示的input框 <input class="hidden" type="text" name="" />
   3. 在 form 上添加表单属性οnsubmit=“return false”

2. form表单提交刷新或跳转页面

   发生场景： 采用form表单提交的同时，不需要刷新或跳转页面

   处理方法：
   1. form表单添加onsubmit 事件，onsubmit="return false"
   2. 在 form 表单后添加一个iframe

     <form action='' method='post' name='iframeForm'  target="iframeForm">
       <button type="submit" class="btn btn-primary">提交</button>
     </form>
     <iframe id="iframeForm" name="iframeForm" style="display:none;"></iframe> 
   

持续更新。。。