利用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 相关文章推荐
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
微信小程序返回箭头跳转到指定页面实例解析
Oct 08 Javascript
vue实现设置载入动画和初始化页面动画效果
Oct 28 Javascript
JS猜数字游戏实例讲解
Jun 30 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
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
浅谈php安全性需要注意的几点事项
2014/07/17 PHP
PHP sleep()函数, usleep()函数
2016/08/25 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
python3实现mysql导出excel的方法
2019/07/31 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python实现猜单词游戏
2020/05/22 Python
两年的个人工作自我评价
2014/01/10 职场文书
倡议书的写法
2014/08/30 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
旗帜观后感
2015/06/08 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript