今天碰到关于表单提交的问题,我是用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. 在SSM框架中我设置拦截器filter不能通过注解获取到实现类

    我在用注解注入实现类的时候,出现了这样的错误:如以下截图: 这个地方报出的错误是说明我的一个接口类型的类没有获取到,后来我就想要是我的实现类没有获取到那么我就直接new一个实现类然后再进行调用就会出现 ...

  2. HDU 2435 There is a war Dinic 最小割

    题意是有n座城市,n号城市不想让1号城市可达n号,每条道路有一条毁坏的代价,1号还可以修一条不能毁坏的道路,求n号城市所需的最小代价最大是多少. 毁坏的最小代价就直接求一遍最大流,就是最小割了.而可以 ...

  3. SQL函数-str()

    1 str()函数用于将数值类型数据转换未字符类型. 2 str()函数语法 select str(数字类型的表达式[,表达式总长度][,小数点后面的位数]) 表达式总长度和小数点后面的位数为可选择参 ...

  4. RMQ算法 以及UVA 11235 Frequent Values(RMQ)

    RMQ算法 简单来说,RMQ算法是给定一组数据,求取区间[l,r]内的最大或最小值. 例如一组任意数据 5 6 8 1 3 11 45 78 59 66 4,求取区间(1,8)  内的最大值.数据量小 ...

  5. 联想杨天 S4130-12 win10改win7 bios参数设置

    一.进入bios 开机后按 F1 二.改bion参数 1.移动到 save& Exit  ,修改 OS optimized defaults   为“Disbled” 再 “F9” 保存 2. ...

  6. ES6学习笔记(四)数值的扩展

    1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...

  7. BZOJ2337: [HNOI2011]XOR和路径(高斯消元,期望)

    解题思路: Xor的期望???怕你不是在逗我. 按为期望,新技能get 剩下的就是游走了. 代码: #include<cmath> #include<cstdio> #incl ...

  8. kali之获取靶机的图片和看的url

    需要用到 fping工具 用-asg参数 调查选项: -4,ipv4只能ping ipv4地址 -6——ipv6只在ping ipv6地址 -b——大小=字节数量的ping数据以字节的方式发送(默认为 ...

  9. MFC- OnIdle空闲处理

    CWinApp::OnIdlevirtual BOOL OnIdle( LONG lCount );返回值: 如果要接收更多的空闲处理时间,则返回非零值:如果不需要更多的空闲时间则返回0.参数: lC ...

  10. 【Henu ACM Round#17 C】Kitahara Haruki's Gift

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 判断sum/2这个价值能不能得到就可以了. 则就是一个01背包模型了. 判断某个价值能否得到. f[j]表示价值j能否得到. f[0 ...