.

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. div模拟的下拉框特效jquery

    从网上找来的,感觉不错就拿来分享下 <style type="text/css"> body, ul, li { margin: 0; padding: 0; font ...

  2. CSS基础知识—【结构、层叠、视觉格式化】

    结构和层叠 选择器的优先级顺序: style[内联元素]选择器>Id选择器>类选择器 属性选择器>元素选择器>通配器选择器 重要性:@important 有这个标记的属性值,优 ...

  3. java 复习003

    今天主要复习下数据结构的东西 树 自平衡二叉查找树 AVL树(高平衡树)(wiki) 特性:任何节点的两个子树的高度最大差别为一 时间复杂度:查找.插入和删除在平均和最坏情况下都是O(log n) 红 ...

  4. java 复习003 之排序篇

    由java 复习003跳转过来的C语言实现版见some-sort-algorithms 快速排序(不稳定 O(n log n)) package vell.bibi.sort_algorithms; ...

  5. IIS中使用PUT方法錯誤記錄

    在IIS7.5中使用PUT,DELETE方法時會遇到404,405錯誤,特記錄解決辦法:404: 405: 在web.config的system.webServer節點中加入 <modules ...

  6. Apache Spark GraphX的简介

    简单地说,GraphX是大规模图计算框架. GraphX 是 Spark 中的一个重要子项目,它利用 Spark 作为计算引擎,实现了大规模图计算的功能,并提供了类似 Pregel 的编程接口. Gr ...

  7. typedef typedef struct的使用

    typedef通常情况用于声明结构体之类的 1,定义某些便于记忆的结构体或者使现有的类型看上去更加整齐,比如后来因为经常使用而被添加进入c/c++标准头文件的stdint.h typedef sign ...

  8. Android程序的安全系统【转】

    最近在移植Android过程中遇到了Android程序(apk)权限的问题.最近也对这方面进行了一些了解,在此和大家分享. Android框架是基于Linux内核构建,所以Android安全系统也是基 ...

  9. [iOS基础控件 - 6.11.1] - 控制器 & 控制器view

    A.控制器的创建 控制器常见的创建方式有以下几种通过storyboard创建 直接创建 ViewController *vc = [[ViewController alloc] init];      ...

  10. MongoDB的安装配置

    1,下载: http://www.mongodb.org/downloads 2.4.5版:http://www.mongodb.org/dr/fastdl.mongodb.org/linux/mon ...