js验证阻止表单提交(表单绑定onsubmit事件)

时间:2022-12-02 18:59:47

原始方式:

<form action="http://www.cnblogs.com/zixueit/" onsubmit="return check()">
    <input type="submit" value="提交" />
</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="提交" />
</form>
 
<script type="text/javascript">
        onload = 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 = false;  
            }  
    }  
}