脚本语言 订阅所有【脚本语言】的日志

用submit()提交表单致使onsubmit失效解决方法

编辑:dnawo 日期:2007-02-02

字体大小: 小 中 大
一、下边本文中将要用到的脚本

复制内容到剪贴板程序代码 程序代码
<script language="javascript">
//表单提交
function submit1(obj){
    obj.submit();
}
//表单提交，调用checked函数
function submit2(obj){
    return checked();
    obj.submit();
}
//表单提交,将ehecked函数内容写入submit3
function submit3(obj){
    if(document.form1.username.value == ""){alert("姓名忘了填写？");document.form1.username.focus();return false;}
    obj.submit();
}
//表单验证
function checked(){
    if(document.form1.username.value == ""){alert("姓名忘了填写？");document.form1.username.focus();return false;}
    return true;
}
</script>


二、分析过程

1.通常的表单验证法，在form中加入onsumbit事件

复制内容到剪贴板程序代码 程序代码
<form id="form1" name="form1" method="post" action="mzwucom.asp" onsubmit="checked();">
  UserNmae:
  <input name="username" type="text" id="username" size="10" maxlength="10" />
  <input type="submit" name="Submit" value="提交" />
</form>


结果：验证机制发生作用！

2.在1的基础上改为通过调用submit()方法提交表单(红色为和1相比修改部分，下同)

复制内容到剪贴板程序代码 程序代码
<form id="form1" name="form1" method="post" action="mzwucom.asp" onsubmit="checked();">
  UserNmae:
  <input name="username" type="text" id="username" size="10" maxlength="10" />
  <input type="button" name="Submit" value="提交" onclick="submit1(this.form);" />
</form>


结果：验证机制失效，表单直接提交！

3.在1的基础上去掉onsubmit事件，调用submit2

复制内容到剪贴板程序代码 程序代码
<form id="form1" name="form1" method="post" action="mzwucom.asp">
  UserNmae:
  <input name="username" type="text" id="username" size="10" maxlength="10" />
  <input type="button" name="Submit" value="提交" onclick="submit2(this.form);" />
</form>


结果：验证机制发生作用，但正确时表单没有提交，由于return true在submit()前！

4.在1的基础上去掉onsubmit事件，调用submit3

复制内容到剪贴板程序代码 程序代码
<form id="form1" name="form1" method="post" action="mzwucom.asp">
  UserNmae:
  <input name="username" type="text" id="username" size="10" maxlength="10" />
  <input type="button" name="Submit" value="提交" onclick="submit3(this.form);" />
</form>


结果：验证机制发生作用，通过则提交表单！

上一篇: 从mzwu类学习ASP类(续)：Visual Basic6.0开发ASP组件
下一篇: 简单form标准化实例——语义结构
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 1 | 引用: 0 | 查看次数: 12613
发表评论
请登录后再发表评论！