利用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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
javascript 日期时间函数(经典+完善+实用)
May 27 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
javascript生成随机数的方法
May 16 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 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
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
document.open() 与 document.write()的区别
2007/08/13 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
window.name代替cookie的实现代码
2010/11/28 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
switch语句的妙用(必看篇)
2016/10/03 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python 合并文件的具体实例
2013/08/08 Python
python中的列表推导浅析
2014/04/26 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
对python 通过ssh访问数据库的实例详解
2019/02/19 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
python接入支付宝的实例操作
2020/07/20 Python
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
实习单位鉴定评语
2014/04/26 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
明星员工获奖感言
2014/08/14 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
工作经历证明书范文
2014/11/02 职场文书
优秀教师个人材料
2014/12/15 职场文书
防卫过当辩护词
2015/05/21 职场文书
红色电影观后感
2015/06/18 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript