js如何阻止表单提交

时间:2017-11-17
我有一个提交按钮的表单。但是,我想以某种方式“抓住”提交事件并阻止表单提交。有什么办法可以做到这一点?我无法修改提交按钮,因为它是自定义控件的一部分。

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

HTML

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

脚本

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

在这里返回false,表单将不会被提交,您还应该调用preventDefault以阻止Ajax表单提交的默认表单操作。

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

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

或者,try...catch可以使用一个块。

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

js阻止表单提交默认行为的两种方式 

有时候我们在表单进行提交前需要进行表单验证,如果验证不通过,那么就需要阻止表单提交的默认行为,下面介绍两种阻止此默认行为的方式。

1  第一种方式就是在按钮上绑定click事件,return false就会阻止默认行为,反之就进行默认行为。

<form action="http://www.baidu.com" method="post">
            
            <!--<input type="submit" value="提交" onclick="return test()"/>-->
            <input type="submit" value="提交"/>
        </form>
  function test(){
        if(/*验证通过*/1){
            return true;
        }else{
            return false;
        }
        
    }

2. 通过submit事件,通过调用event.preventDefault();方法来阻止默认行为。

$("form").on("submit",function(event){
            if(/*验证通过*/1){
                
            }else{
                 event.preventDefault();
          //return false;  当然这里也可以返回false。
            }
        })