笔记四：onsubmit和onclick的区别
今天碰到关于表单提交的问题，我是用submit还是用onclick好呢，然后我去百度了一下两者的区别：
onsubmit只能表单上使用,提交表单前会触发, onclick是按钮等控件使用, 用来触发点击事件。
在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。也就是说onclick触发时间要比onsubmit要早
这是他的提交过程：
1、用户点击按钮 ---->
2、触发onclick事件 ---->
3、onclick返回true或未处理onclick ---->
4、触发onsubmit事件 ---->
5、onsubmit未处理或返回true ------>
6、提交表单.
onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["password"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
else if(y == null || y == "")
{
alert("需要输入密码。");
return false;
}
else
alert("输入成功。");
return true;
}
</script>
</head>
<body>
//用onclick
<form name="myForm" action="demo_form.php"
onclick="validateForm()" method="post">
名字: <input type="text" name="fname">
密码：<input type="text" name="password">
<input type="submit" value="提交">
</form>
//用onsubmit
<form name="myForm" action="demo_form.php"
onclick="validateForm()" method="post">
名字: <input type="text" name="fname">
密码：<input type="text" name="password">
<input type="submit" value="提交">
</form>
onsubmit="return validateForm()" 为什么不是 onsubmit="validateForm()" ？？
onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时，返回 false，可以阻止表单提交。
为何？
原来 onsubmit 属性就像是 <form> 这个 html 对象的一个方法名，其值（一字符串）就是其方法体，默认返回 true；
onsubmit="return validateForm()"
相当于：
Form.prototype.onsubmit = function() {
return validateForm()
};
笔记四：onsubmit和onclick的区别的更多相关文章
- python3.4学习笔记(四) 3.x和2.x的区别，持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- java之jvm学习笔记四(安全管理器)
java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...
- 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)
1. Set - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...
- C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- 《MFC游戏开发》笔记四 键盘响应和鼠标响应：让人物动起来
本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http:// ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- addEventListener和attachEvent以及element.onclick的区别
addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...
- Java学习笔记四---打包成双击可运行的jar文件
写笔记四前的脑回路是这样的: 前面的学习笔记二,提到3个环境变量,其中java_home好理解,就是jdk安装路径:classpath指向类文件的搜索路径:path指向可执行程序的搜索路径.这里的类文 ...
- Java加密与解密笔记(四) 高级应用
术语列表: CA:证书颁发认证机构(Certificate Authority) PEM:隐私增强邮件(Privacy Enhanced Mail),是OpenSSL使用的一种密钥文件. PKI:公钥 ...
随机推荐
- cocos2d-x 学习资源整理（持续更新...）
生活像一把无情刻刀.改变了我们模样.以前我以为会亘古不变的东西,突然在一瞬间失去了信念... 假设你改变不了生活中患得患失的心情.那就试着让自己变得强大一点.由于能做到不以物喜不以己悲都是建立在强大的 ...
- openGl超级宝典学习笔记 (2) 7个主要的几何图元
点(GL_POINTS): 点总是正方形的像素,默认情况下,点的大小不受透视除法影响. 即无论与视点的距离怎样,它的大小都不改变.为了获得圆点.必须在抗锯齿模式下绘制点. 能够用glPointSize ...
- Windows改动cmd字符集
在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...
- RvmTranslator7.0-IFC
RvmTranslator7.0-IFC eryar@163.com RvmTranslator can translate the RVM file exported by AVEVA Plant( ...
- IIS 无法读取配置节"system.web.extensions",由于它缺少节声明
作者:jiankunking 出处:http://blog.csdn.net/jiankunking 今天在本地安装iis.搭建站点,应用程序的时候报错以下的错误: server错误 Internet ...
- 26.angularJS $routeProvider
转自:https://www.cnblogs.com/best/tag/Angular/ O'Reilly书上的伪代码 var someModule = angular.module('someMod ...
- Yeslab华为安全HCIE七门之--防火墙高级技术（17篇）
Yeslab 全套华为安全HCIE七门之第三门 防火墙高级技术 课程目录: 华为安全HCIE-第三门-防火墙高级技术(17篇)\1_用户认证_用户_认证域_认证策略.avi 华为安全HCIE- ...
- JAVA文件读取FileReader
JAVA文件读取FileReader 导包import java.io.FileReader 创建构造方法public FileReader(String filename),参数是文件的路径及文件名 ...
- 紫书 习题 10-25 UVa 1575 (有重复元素的全排列+暴搜）
我一开始以为有什么很牛逼的方法来做,然后一直没有思路 后来看了https://blog.csdn.net/zju2016/article/details/78562932的博客 竟然是暴搜?????? ...
- LRJ入门经典-0905邮票和信封305
原题 LRJ入门经典-0905邮票和信封305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 假定一张信封最多贴5张邮票,如 ...