关于HTML中onSubmit属性的触发时机

======================================================
注：本文源代码点此下载
======================================================

在日常的开发中,往往在表单被提交之前需要加上验证(验证日期格式是否正确,验证某个input是否为空…),首先想到的就是 onsubmit事件,在一个submit类型按钮点击时,首先触发的就是form的onsubmit()事件。这时,我们就可以写上自己的验证。代码如下:

form action="1.asp" method="post" name="form1"onsubmit=“alert(‘执行了onsubmit事件’);return true;”>

input type="submit" name="save" value="保存" />

form>

但是如果我们直接调用form的submit()事件,却不会执行onsubmit(),代码如下:

form action="1.asp" method="post" name="form1"onsubmit=“alert(‘执行了onsubmit事件’);return true;”>”>

input type="button" name="save" value="保存" onclick=”this.form.submit();” />

form>

我们如果想调用form的onsubmit事件只能通过调用,只有这样,才能执行这个事件:

form action="1.asp" method="post" name="form1"onsubmit=“alert(‘执行了onsubmit事件’);return true;”>”>

input type="button" name="save" value="保存" onclick=”this.form.onsubmit();” />

form>

但是这样就失去了submit功效。也许我们可以用(attachevent() / addeventlistener() )模拟触发器的方式实现,语法如下(下面部分是转载内容……):

分析了一下原因:onsubmit属性的触发时机是在form用input:submit这样的button提交时才会触发,否则不会触发。

后来,在官方文档上也找到了如下说明,证明了我的这一分析,如下:

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.

为了证实这一分析,我做了一个完整的测试:

doctype html public "-//w3c//dtd html 4.0 transitional//en">

html>

head>

script language="javascript">

function t(){

var f=document.getelementbyid("f");

f.submit();

alert('333');

}

script>

head>

body>

form id="f" onsubmit="alert('2222');">

input type="submit" value="submit" />

input type="button" value="button" onclick="t();"/>

form>

body>

html>点击submit按钮即可出现“2222”提示,点击button的话,会出现“333”提示。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/