笔记四: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,都不会引起表单提交。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 function validateForm() { 7 var x = document.forms["myForm"]["fname"].value; 8 var y = document.forms["myForm"]["password"].value; 9 if (x == null || x == "") { 10 alert("需要输入名字。"); 11 return false; 12 } 13 else if(y == null || y == "") 14 { 15 alert("需要输入密码。"); 16 return false; 17 } 18 else 19 alert("输入成功。"); 20 return true; 21 } 22 </script> 23 </head> 24 <body> 25 //用onclick 26 <form name="myForm" action="demo_form.php" 27 onclick="validateForm()" method="post"> 28 名字: <input type="text" name="fname"> 29 密码:<input type="text" name="password"> 30 <input type="submit" value="提交"> 31 </form> 32 //用onsubmit 33 <form name="myForm" action="demo_form.php" 34 onclick="validateForm()" method="post"> 35 名字: <input type="text" name="fname"> 36 密码:<input type="text" name="password"> 37 <input type="submit" value="提交"> 38 </form>
οnsubmit="return validateForm()" 为什么不是 οnsubmit="validateForm()" ??
οnsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证,但是在验证不通过的情况下,并不能阻止表单提交。
οnsubmit="return validateForm()" 当验证不通过时,返回 false,可以阻止表单提交。
为何?
原来 onsubmit 属性就像是 <form> 这个 html 对象的一个方法名,其值(一字符串)就是其方法体,默认返回 true;
onsubmit="return validateForm()" 相当于: Form.prototype.onsubmit = function() { return validateForm()};
转载于:https://www.cnblogs.com/liaoxun/p/10057402.html
笔记四:onsubmit和onclick的区别相关推荐
- onSubmit与onClick的区别
onSubmit是表单上(也只能是表单)用的,提交表单前会触发 onClick是按钮等控件上用的,用来触发点击事件. 用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可 ...
- Servlet笔记四(JSP技术)
本栏博客目录 Serlvet笔记一(Servlet基础) Servlet笔记二(请求和响应) Servlet笔记三(会话及其会话技术) Servlet笔记四(JSP技术) Servlet笔记五(EL表 ...
- JavaScript学习笔记(四)(DOM)
JavaScript学习笔记(四) DOM 一.DOM概述 二.元素对象 2.1 获取方式 (1).通过ID获取一个元素对象,如果没有返回null (2).通过`标签名`获取一组元素对象,,如果没有返 ...
- JS高级程序设计——阅读笔记四
JS高级程序设计--阅读笔记四 第六章 集合引用类型 6.1 Object 6.2 Array 6.2.1 创建数组 from()函数 6.2.2 数组空位 6.2.3 数组索引 6.2.4 检测数组 ...
- 内存管理(操作系统笔记四)
内存管理(操作系统笔记四) 内存的基本概念 内存 可存放数据.程序执行之前 必须先放到内存中才能被CPU处理 --缓和CPU与硬盘之间的速度矛盾. 内存中就是一系列的存储单元,如果计算机 " ...
- 四种DCOM错误的区别,0x80080005 0x800706be 0x80010105 0x
四种DCOM错误的区别 Differences between the following DCOM error 0x80080005 0x800706be 0x80010105 0x800706ba ...
- C#可扩展编程之MEF学习笔记(四):见证奇迹的时刻
前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...
- IOS学习笔记(四)之UITextField和UITextView控件学习
IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...
- MSSQL编程笔记四 解决count distinct多个字段的方法
MSSQL编程笔记四 解决count distinct多个字段的方法 参考文章: (1)MSSQL编程笔记四 解决count distinct多个字段的方法 (2)https://www.cnblog ...
- RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决)
RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) 参考文章: (1)RabbitMQ学习笔记四:RabbitMQ命令(附疑难问题解决) (2)https://www.cnblogs. ...
最新文章
- 18.绝对路径和相对路径
- 习题2-5 求平方根序列前N项和 (15 分)
- python3 uvloop 简介
- (3)数据库的建立和数据表的操作
- MySQL优化之my.conf配置详解
- win10树莓派改ip_Window 10通过网线和Wifi连接树莓派
- ASP.NET Core 缓存技术 及 Nginx 缓存配置
- java正则表达式 ascii,是否可以检查字符串是否在Java中仅包含ASCII?
- swift 通知_Swift 闭包无脑加 [weak self] 行不行?
- DirectX组件之---DirectShow介绍
- Windows Xp Sp3官方简体中文版(原版) 纯净安装版 百度网盘下载
- 泰森多边形算法 java_泰森多边形构建原理
- 阿里OOS的简单使用
- 项目:文件搜索助手(FileSeeker)
- 成都榆熙:拼多多商家如何批量设置产品属性值?
- Hadoop搭建之Centos 7.0系统安装
- qt登录界面简单制作,是真的保姆级别了!!!
- Android 一共有多少种动画?准确告诉你!
- JVM监控:JMX组件与底层原理
- 别再提程序员应届年薪20万了,人工智能已经年薪60万了!