利用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固定浮动侧边栏实现思路及代码
Sep 28 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
微信小程序实现蓝牙打印
Sep 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
PHP源代码数组统计count分析
2011/08/02 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php分页函数示例代码分享
2014/02/24 PHP
php中define用法实例
2015/07/30 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
微信小程序文章列表功能完整实例
2020/06/03 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
JS实现简易日历效果
2021/01/25 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
python requests 测试代理ip是否生效
2018/07/25 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
如何使用python代码操作git代码
2020/02/29 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python绘制趋势图的示例
2020/09/17 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
横幅标语大全
2014/06/17 职场文书
校园广播站开场白
2015/06/01 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers