首页 > 代码库 > js验证阻止表单提交(表单绑定onsubmit事件)
js验证阻止表单提交(表单绑定onsubmit事件)
原始方式：
<form action="http://www.cnblogs.com/zixueit/" onsubmit="return check()"> <input type="submit" value="http://www.mamicode.com/提交" /></form> <script type="text/javascript"> function check(){ if(!confirm(‘确定？‘)){ return false; } }</script>
大多数情况我们需要行为和结构分离，所以我们在html代码中加onclick代码是不合适的，解决方案：
//dom0级事件绑定<form action="http://www.cnblogs.com/zixueit/"> <input type="submit" value="http://www.mamicode.com/提交" /></form> <script type="text/javascript"> onl oad = function(){ myform = document.getElementsByTagName(‘form‘)[0]; myform.onsubmit= function(){ if(!confirm(‘你确定？‘)){ return false; } } }</script>
再看看dom2级事件绑定：
myform = document.getElementsByTagName(‘form‘)[0]; if (myform.addEventListener) { myform.addEventListener(‘submit‘, check, false); } else {//for ie myform.attachEvent("onsubmit", check); } function check(){ if(!confirm(‘确定？‘)){ return false; } }
但是我们测试的时候我们会发现IE下能够阻止表单提交，但是FF、chrome等浏览器并不能阻止表单提交
原因是：Object EventListener：This is an ECMAScript function reference. This method has no return value. The parameter is a Event object.
可见，listener是没有返回值的（写了也不会认），因此我们的check函数的返回值是不起作用的。
解决方案：
function check(ev) { if (!confirm(‘确定？‘)) {//验证出错的情况just a demo ev = ev || window.event; // Event对象 if (ev.preventDefault) { // 标准浏览器 ev.preventDefault(); } else { // IE浏览器 window.event.returnValue = http://www.mamicode.com/false; >
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。