今天碰到关于表单提交的问题，我是用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的区别的更多相关文章

  1. python3.4学习笔记(四) 3.x和2.x的区别，持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  2. java之jvm学习笔记四(安全管理器)

    java之jvm学习笔记四(安全管理器) 前面已经简述了java的安全模型的两个组成部分(类装载器,class文件校验器),接下来学习的是java安全模型的另外一个重要组成部分安全管理器. 安全管理器 ...

  3. 【转载】MDX Step by Step 读书笔记(四) - Working with Sets (使用集合)

    1. Set  - 元组的集合,在 Set 中的元组用逗号分开,Set 以花括号括起来,例如: { ([Product].[Category].[Accessories]), ([Product].[ ...

  4. C#可扩展编程之MEF学习笔记(四)：见证奇迹的时刻

    前面三篇讲了MEF的基础和基本到导入导出方法,下面就是见证MEF真正魅力所在的时刻.如果没有看过前面的文章,请到我的博客首页查看. 前面我们都是在一个项目中写了一个类来测试的,但实际开发中,我们往往要 ...

  5. 《MFC游戏开发》笔记四 键盘响应和鼠标响应：让人物动起来

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http:// ...

  6. IOS学习笔记(四)之UITextField和UITextView控件学习

    IOS学习笔记(四)之UITextField和UITextView控件学习(博客地址:http://blog.csdn.net/developer_jiangqq) Author:hmjiangqq ...

  7. addEventListener和attachEvent以及element.onclick的区别

    addEventListener和attachEvent以及element.onclick的区别 attachEvent是ie添加事件处理程序,接收两个参数,其中事件类型名称要加"on&qu ...

  8. Java学习笔记四---打包成双击可运行的jar文件

    写笔记四前的脑回路是这样的: 前面的学习笔记二,提到3个环境变量,其中java_home好理解,就是jdk安装路径:classpath指向类文件的搜索路径:path指向可执行程序的搜索路径.这里的类文 ...

  9. Java加密与解密笔记(四) 高级应用

    术语列表: CA:证书颁发认证机构(Certificate Authority) PEM:隐私增强邮件(Privacy Enhanced Mail),是OpenSSL使用的一种密钥文件. PKI:公钥 ...

随机推荐

  1. [Poi] Build and Analyze Your JavaScript Bundles with Poi

    Ever wonder where those extra KB in your bundle are coming from? This lesson walks you through runni ...

  2. 习题(3-3) 计算(a+b)*c的值

    题目 - 习题(3-3) 计算(a+b)*c的值   来源 计算概论B 2010 描写叙述 计算表达式(a+b)*c的值,当中a, b, c均为整数,且a,b,c的值介于-10000和10000之间( ...

  3. 安卓自己定义对话框及The specified child already has a child问题

    问题:在android开发过程中,有时会在不同情况下遇到同种问题:The specified child already has a parent.You must call removeView() ...

  4. Beta分布从入门到精通

    近期一直有点小忙,可是不知道在瞎忙什么,最终有时间把Beta分布的整理弄完. 以下的内容.夹杂着英文和中文,呵呵- Beta Distribution Beta Distribution Defini ...

  5. legend---二、如何降低编程复杂度

    legend---二.如何降低编程复杂度 一.总结 一句话总结:配置文件,数据库 个性的东西可以一起写入数据库,那么编程复杂度会大幅降低,页面灵活度也大幅降低(特有属性写进数据库) 比如不同难度的颜色 ...

  6. 分享一段官date函数用法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Copying GC (Part two :Multi Space Copying GC)

    目录 近似深度优先搜索方法 Cheney的GC复制算法 前提 执行结果 多空间复制算法 multi_space_copying()函数 mark_or_copy() copy() 执行过程 优缺点 近 ...

  8. file---探测给定文件的类型

    file命令用来探测给定文件的类型.file命令对文件的检查分为文件系统.魔法幻数检查和语言检查3个过程. 语法 file(选项)(参数) 选项 -b:列出辨识结果时,不显示文件名称: -c:详细显示 ...

  9. 本地运行github上的vue2.0仿饿了么webapp项目

    在vue刚刚开始流行的时候,大多数人学习大概都见到过这样的一个项目吧,可以作为学习此框架的一个模板了 github源码地址:https://github.com/RegToss/Vue-SPA 课程教 ...

  10. 从零使用qemu模拟器搭建arm执行环境

    为什么会有这篇文章 早在2011年的时候,跟当时同事一起讨论,做Linux系统开发正处于整个Linux开发中间层,没有上层的C/C++业务和数据库的开发经验.也没有底层的内核和驱动开发经验,究竟路该怎 ...