利用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 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
防止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获取远程文件内容的函数
2015/11/02 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
addEventListener 的用法示例介绍
2014/05/07 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
人工神经网络算法知识点总结
2019/06/11 Python
python logging日志模块原理及操作解析
2019/10/12 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
机械专业应届生求职信
2013/12/12 职场文书
学术诚信承诺书
2014/05/26 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
新郎结婚感言
2015/07/31 职场文书
《实心球》教学反思
2016/02/23 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
导游词之无锡东林书院
2019/12/11 职场文书