form表单的submit和onsubmit的区别
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了form表单的submit和onsubmit的区别相关的知识，希望对你有一定的参考价值。
javascript中的submit与onsubmit事件:submit与onsubmit
发生顺序:onsubmit -> submit
1.阻止表单提单：
<script>
function submitFun()
//逻辑判断
return true; //允许表单提交
//逻辑判断
return false;//不允许表单提交
</script>
<form onsubmit=” reture submitFun();”> //注意此处不能写成 onsubmit=”submitFun();” 否则将表单总是提交的
</form>
2.onsubmit()与submit() ：
<script>
function fun()
alert("form_submit");
</script>
<form onsubmit="fun()">
<input type="submit" id="aaa" value="submit"> <!--能弹出form_submit-->
<input type="button" id="bbb" value="onclick_submit" onclick="document.forms[0].submit()">
<!--
表单会提交，但是不会执行fun() 原因是 onsubmit事件不能通过此种方式触发（在IE环境）
直接用脚本documetn.formName.submit()提交表单是不会触发表单的onsubmit()事件的
-->
<input type="button" id="bb1" value="onclick_onsubmit" onclick="document.forms[0].onsubmit()">
<!--会触发fun()函数-->
</form> 参考技术A submit和onsubmit在表单中经常用上
由表单中onsubmit="return false;"想到的
众所周知，在表单中加上onsubmit="return false;"可以阻止表单提交。 下面是简单的一小段代码： 代码
大家判断像上面的写法，点击submit按钮该表单是否提交？
若答案为是，就不用往下看了。
若答案为否，错了。实际情况是表单正常提交，若想它不提交，应该将 代码
改为 代码
为何？
原来onsubmit属性就像是这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true；
和Java一样，在该方法体中你可以写任意多个语句，包括内置函数和自定义函数，如 代码
onsubmit="
alert('haha'); // 内置函数
submitTest(); // 自定义函数
alert(this.tagName); // 用到了this关键词
......(任意多条语句)
return false; "
就相当于 代码
Form.prototype.onsubmit = function()
alert('haha'); // 内置函数
submitTest(); // 自定义函数
alert(this.tagName); // 用到了this关键词
......(任意多条语句)
return false; ;
这样的话你就覆写了(override)其默认方法（默认返回true）
大家注意到方法体中可以用this这个关键词，这里即代表了的对象实例。
经过这样的分析后，以上情况就不难理解了： 代码
这样写，override方法的效果为： 代码
Javascript中的form
form对象是表单的DOM对象
方法：submit()提交表单，但是不会触发onsubmit事件。
在点击submit后form的onsubmit事件被触发，在onsubmit中可以进行数据校验，如果数据有问题，返回false即可取消提交。
示例代码：提交按钮的click和表单的submit方法比较
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
onload=function(){
document.getElementById(‘fm‘).onsubmit = function(){
//验证数据文本框中的值是否为空
if(document.getElementById(‘txt‘).value.length==0)
{
return false;
}
};
document.getElementById(‘dv‘).onclick=function(){
//这个是调用按钮的点击事件，会执行表单的onsubmit事件，推荐使用这个
//document.getElementById(‘btnSearch‘).click();
//调用表单form的提交方法，不会执行表单的onsubmit事件
document.getElementById(‘fm‘).submit();
};
};
</script>
</head>
<body>
<form id="fm" action="http://www.baidu.com/" method="get">
<input type="text" id="txt"/>
<input type="submit" id="btnSearch" value="搜索一下"/>
</form>
<div id="dv" style="width:300px;height:180px;border:solid 1px red;"></div>
</body>
</html>效果图
以上是关于form表单的submit和onsubmit的区别的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript基础 submit按钮配合form的onsubmit实现表单的提交与验证
Angular 2 将表单分配给变量不起作用#f="form" (submit)="onSubmit(f.value)"