.

onsubmit一般用来做验证的,用来控制表单提交的。

之前使用数据提交基本上使用ajax做数据提交,在数据验证的时候,只有通过数据验证之后,才会post/get数据到对应api文件,但是这次涉及图片上传,只能使用form表单提交,但是这前台js判断的时候出现问题。就是在js验证之后,form表单自动提交。

如何防止表单自动提交?

<form name="form1" onsubmit="return check()" method="post" action="search_result.php">

我先说下onsubmit="return check()"这个是干什么用的,首先是在form标签中有一个onsubmit的属性,他有两个值分别是true和false,如果true,这个网页就跳转到action属性的search_result.php页面,否则不跳转。所以用 return 返回一个true或false的值。

也就是 onsubmit的值可以决定action属性是否触发。

form表单另外一个事件—onclick

<form name="form1" onclick="return check();" method="post" action="search_result.php">

js方法:

function check(){

//判断。。

return false:

}

onclick 和 onsubmit 的区别:

onSubmit 是表单上(也只能是表单)用的,提交表单前会触发。 
onClick 是按钮等控件上用的,用来触发点击事件。

用作数据验证的时候,可以选择在 submit 按钮上的 onclick 中验证,可以在 onsubmit 中验证。但是从事件触发顺序上来说,onclick更早。顺序是:

用户点击按钮 -> onclick -> 如果onclick返回有效或未处理 onclick 则提交表单 -> onsubmit -> 如果 onsubmit 未处理或返回true,则提交,否则取消提交。

onsubmit 中返回 false 会引起取消表单提交,onclick 中返回 false 则会引起此次点击操作被判断为无效,则也就不会引起表单提交。

为什么要使用return函数?

表单1:<form name="form1" onsubmit="return check();" method="post" action="search_result.php">

表单2:<form name="form2" onsubmit="check()" method="post" action="search_result.php">

js方法:

function check(){

//判断。。

return false:

}

———————————————————————-

上面两个表单的check方法返回的是false,那么那个表单可以阻止form表单action的自动提交呢?

事实上:只有表单1可以在Ie和火狐下,做到form表单自身的提交

表单2可以在IE下阻止form表单自动提交,但是在火狐下不能阻止from表单的自动提交。

原因:请看ECMAScript Language Binding,其中明确地写着,event listener没有返回值。其实一切的根本都因为IE不支持DOM Level 2,也就是IE和火狐的不兼容,导致的check不能阻止表单提交。

我们可以这样理解:check的返回值是false,那么return check()==return false就是阻止默认事件(也就是onsubmit事件)。而如果只是check()=false也就是 ,而这个false只是在check里面中断对下面的js执行,而不是对这个表单的默认事件进行阻止。

return的作用

在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为

Return True 就相当于执行符

--------------------------------------------------其他事件------------------------------------------------

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

属性 描述
onload 脚本 当文档被载入时执行脚本
onunload 脚本 当文档被卸下时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。

属性 描述
onchange 脚本 当元素改变时执行脚本
onsubmit 脚本 当表单被提交时执行脚本
onreset 脚本 当表单被重置时执行脚本
onselect 脚本 当元素被选取时执行脚本
onblur 脚本 当元素失去焦点时执行脚本
onfocus 脚本 当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素:

属性 描述
onabort 脚本 当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 描述
onkeydown 脚本 当键盘被按下时执行脚本
onkeypress 脚本 当键盘被按下后又松开时执行脚本
onkeyup 脚本 当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效:base、bdo、br、frame、frameset、head、html、iframe、meta、param、script、style 以及 title 元素。

属性 描述
onclick 脚本 当鼠标被单击时执行脚本
ondblclick 脚本 当鼠标被双击时执行脚本
onmousedown 脚本 当鼠标按钮被按下时执行脚本
onmousemove 脚本 当鼠标指针移动时执行脚本
onmouseout 脚本 当鼠标指针移出某元素时执行脚本
onmouseover 脚本 当鼠标指针悬停于某元素之上时执行脚本
onmouseup 脚本 当鼠标按钮被松开时执行脚本

js中常用属性备忘的更多相关文章

  1. js中常用的对象—String的属性和方法

    今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...

  2. js中常用的对象—Array的属性和方法

    今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...

  3. 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  4. Js中常用的字符串,数组,函数扩展

    由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...

  5. 零基础学习java------36---------xml,MyBatis,入门程序,CURD练习(#{}和${}区别,模糊查询,添加本地约束文件) 全局配置文件中常用属性 动态Sql(掌握)

    一. xml  1. 文档的声明 2. 文档的约束,规定了当前文件中有的标签(属性),并且规定了标签层级关系 其叫html文档而言,语法要求更严格,标签成对出现(不是的话会报错) 3. 作用:数据格式 ...

  6. js中常用的操作

    1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器

  7. C# devExpress BandedGridView属性 备忘

    BandedGridView属性备忘 StringBuilder sb = new StringBuilder(); DevExpress.XtraGrid.Views.BandedGrid.Band ...

  8. metasploit 常用命令备忘

    metasploit 常用命令备忘    MSFconsole Commands-------------------------------------24show exploits 查看所有exp ...

  9. Linux基础之常用基本命令备忘

    Linux基础之常用基本命令备忘 PWD   查询当前所在Linux上的位置 /         根目录 CD(change directory)切换目录  语法 CD /(注意添加空格)   LS ...

随机推荐

  1. XAMPP:访问phpmyadmin出错的解决方案

    来源:http://www.ido321.com/1246.html XAMPP(Apache+MySQL+PHP+PERL)是一个功能强大的建 XAMPP 软件站集成软件包,轻巧,用起来很方便.它提 ...

  2. URAL-1982 Electrification Plan 最小生成树

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1982 题意:无向图,给n个点,n^2条边,每条边有个一权值,其中有k个点有发电站,给出这 ...

  3. http协议中的Content-Type

    今天对http协议中的Content-Type有所理解了 它的主要功给我的感觉,还是在前台(客户端)给服务器传输数据时,描述这个数据的格式. 比如,我只传一个表单数据,但这个表单中只有文本,没有其它的 ...

  4. homework08

    1.局部变量生命周期 #include "iostream.h" ;} int main() { ; add1(n); cout << n << endl; ...

  5. internet访问局域网内部方法之----------路由器端口映射

    很多人每天都问为什么要端口映射?例如:通过路由器上网的,网站自己可以访问,但是别人就不能:输入127.0.0.1可以访问,别人还是看不到:输入localhost可以看到,但是别人就是看不到,气人啊-没 ...

  6. [iOS UI进阶 - 2.1] 彩票Demo v1.1

    A.需求 1.优化项目设置 2.自定义导航栏标题按钮 3.多版本处理 4.iOS6和iOS7的适配 5.设置按钮背景 6.设置值UIBarButtonItem样式   code source: htt ...

  7. 简单的圆形图标鼠标hover效果 | CSS3教程

    演示 本教程将和大将分享一些简单的圆形图标在鼠标hover时的动画效果.这种效果在不少时尚的酷站上都有.本教程中的例子主要是利用在a元素的伪元素上使用CSS transitions和animation ...

  8. 在Linux下部署activemq

    今天的任务就是在一台新的服务器上继续部署activemq.其实都蛮简单的.首先先下载包:115U盘下载 2 上传到linux下的某个文件夹下.解压缩 tar -zxvf apache-activemq ...

  9. 树莓派加入定时任务实现花生壳定时重启(linux的定时任务)

    由于花生壳在linux下不稳定,联系开机一个星期左右会挂掉,所以要使用定时任务实现每小时刷新一次/启动一次. 使用的是linux下的定时任务crontab去实现. 实现步骤: 1.编辑/etc/cro ...

  10. 算法之旅,直奔<algorithm>之十七 find_first_of

    find_first_of(vs2010) 引言 这是我学习总结 <algorithm>的第十七篇,find_first_of是匹配的一个函数.<algorithm>是c++的 ...