.

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. JDBC获取表的主键

    JDBC获取表的主键 案例,创建订单,并根据订单号向订单明细表插入数据 sql语句: 创建两表 create table orders(  id number(4) primary key,  cus ...

  2. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  3. string insert 的性能分析

    有这样一个网络传输包. 前端有个固定的包头,包含了后面传输body的长度信息. 在有拷贝的前提下,我们选用什么性能比较高呢?         方案一         复用data_buffer str ...

  4. Android问题-打开DelphiXE8与DelphiXE10新建一个空工程提示"out of memory"

    错误信息: [DCC Error] E2597 d:\XE8\Embarcadero\Studio\16.0\PlatformSDKs\android-ndk-r9c\toolchains\arm-l ...

  5. 强连通分量(tarjan求强连通分量)

    双DFS方法就是正dfs扫一遍,然后将边反向dfs扫一遍.<挑战程序设计>上有说明. 双dfs代码: #include <iostream> #include <cstd ...

  6. ASP.NET MVC- 数据验证机制

    ASP.NET MVC的数据验证机制,比起ASP.NET WEBFORM那种高效很多.下面记录以下两个示例,以便日后方便查阅. 方式一:在Controller里通过AddModelError方法返回错 ...

  7. ElasticSearch中文分词(IK)

    ElasticSearch常用的很受欢迎的是IK,这里稍微介绍下安装过程及测试过程.   1.ElasticSearch官方分词 自带的中文分词器很弱,可以体检下: [zsz@VS-zsz ~]$ c ...

  8. ecshop后台限制IP登录

    ecshop是开源系统,所以难免会有漏洞   黑客攻击网站,往往是通过漏洞获取后台管理员权限,然后再做一些破坏 如果我们在后台文件里限制指定的IP才能登录后台,就相对安全多了 下面给出大家解决方案: ...

  9. 在Hibernate中使用HibernateTemplate来进行包含sql语句的查询

    /**     * 使用sql语句进行查询操作     * @param sql     * @return     */    public List queryWithSql(final Stri ...

  10. Cygwin解决Windows远程登录linux服务器

    下载地址http://www.cygwin.com/install.html 选择mirror.htnshost.com网站下载的比较快. 安装Cygwin(/X)需要选择的包: openssh(必选 ...