利用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 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
详解js前端代码异常监控
Jan 11 Javascript
学习使用jQuery表单验证插件和日历插件
Feb 13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
react 中父组件与子组件双向绑定问题
May 20 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使用Mysql事务实例解析
2014/09/08 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
angular分页指令操作
2017/01/09 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[01:14]辉夜杯战队访谈宣传片—NEWBEE.Y
2015/12/26 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python保存网页图片到本地的方法
2018/07/24 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Django连接数据库并实现读写分离过程解析
2019/11/13 Python
python批量处理txt文件的实例代码
2020/01/13 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
荷兰皇家航空公司中国官网:KLM中国
2017/12/13 全球购物
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
青春励志演讲稿
2014/04/29 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
纪律委员竞选稿
2015/11/19 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
MSSQL基本语法操作
2022/04/11 SQL Server
vue如何清除浏览器历史栈
2022/05/25 Vue.js