form表单的onsubmit和submit

onsubmit:一般会用在表单验证中，当返回false时，会阻止表单提交，返回true,则表单提交成功。

submit:表单提交方法。

关于这两个方法的用法，却有几个让人迷惑不解的地方，看下面这个表单：

<form οnsubmit='alert('submit');return false' >

<input type='submit' value='submit'/>

</form>

当点击提交按钮时，会触发onsubmit方法，弹出alert框，返回false,此时阻止了表单提交。

<form οnsubmit='alert('submit');return false' >

<input type='button' value='submit' οnclick="function(){this.form.submit();}"/>

</form>

此时点击提交，却不会触发onsubmit方法，表单成功提交了。

由此可见，<input type='submit' value='submit'/>提交会调用onsubmit方法，this.form.submit()方法是不会调用onsubmit的。

找到一份儿官方解释：

The submit method does not invoke the onsubmit event handler. Call the onsubmit event handler directly. When using Microsoft® Internet Explorer 5.5 and later, you can call the fireEvent method with a value of onsubmit in the sEvent parameter. 

要想调用onsubmit方法，在使用button的情况下只能手动触发：

this.form.onsubmit();

明白了onsubmit和submit的用法和联系后，在做表单校验时，可采取下面两种方法：

1、

<form οnsubmit='return validate(this.form); >

<input type='submit' value='submit'/>

</form>

使用<input type='submit' value='submit'/>就可以配合onsubmit做表单校验

2、

<form  >

<input type='button' value='submit' οnclick="validate(this.form)"/>

</form>

function validate(form){

//TODO 去做各种校验

if(校验通过){

form.submit()；

}

}

但在大多数情况下，我们希望使用submit,因为这样子就可以直接回车提交，而不需要用鼠标去点击下那个button按钮，

在这种情况下，我们还有另外一种校验方式，通过addEventListener():

//这个只会由input type=submit触发

form.addEventListener('submit', function (e) {

e.preventDefault();//取消掉默认事件

     //进行校验

//do some validate

     if（校验通过） {

this.submit()；

}

} );