利用JavaScript阻止表单提交的两种方法


Posted in Javascript onAugust 11, 2016

在JavaScript中,阻止表单默认提交行为的方法有两种,分别是:

(1) return false

示例代码

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;
 };
</script>

(2) 使用preventDefault()

在标准浏览器中,阻止浏览器默认行为使用event.preventDefault(),而在IE6~8中,使用returnValue属性来实现。

示例代码

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>

<script>
 var submitBtn = document.getElementById("submit");

 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容标准浏览器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>

以上就是利用JavaScript来阻止表单提交的两种方法的全部内容,希望本文的内容对大家使用JavaScript有所帮助。

Javascript 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JavaScript中return false的用法
Mar 12 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
Jan 02 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 #Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 #Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 #Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
Aug 11 #Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 #Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 #Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 #Javascript
You might like
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
更正确的asp冒泡排序
2007/05/24 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
python自动格式化json文件的方法
2015/03/11 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
python实现在线翻译功能
2020/03/03 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
几个Linux面试题笔试题
2016/08/01 面试题
学校献爱心活动总结
2014/07/08 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
Go语言空白表示符_的实例用法
2021/07/04 Golang
Vue操作Storage本地化存储
2022/04/29 Vue.js