利用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 相关文章推荐
DWR Ext 加载数据
Mar 22 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
AngularJS equal比较对象实例详解
Sep 14 Javascript
简单理解vue中Props属性
Oct 27 Javascript
Vue组件中slot的用法
Jan 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
example1.php
2006/10/09 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
php对象工厂类完整示例
2018/08/09 PHP
PHP递归算法的简单实例
2019/02/28 PHP
function, new function, new Function之间的区别
2007/03/08 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Vue 实现v-for循环的时候更改 class的样式名称
2020/07/17 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
Python中动态获取对象的属性和方法的教程
2015/04/09 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
python制作图片缩略图
2019/04/30 Python
Python处理session的方法整理
2019/08/29 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python实现图像拼接功能
2020/03/23 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
使用C#编写创建一个线程的代码
2013/01/22 面试题
2015年行风建设工作总结
2015/05/15 职场文书
《角的度量》教学反思
2016/02/18 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python