Home > Backend Development > PHP Tutorial > javascript - 为什么这个代码可以提交过去?

javascript - 为什么这个代码可以提交过去?

WBOY
Release: 2016-06-06 20:14:39
Original
951 people have browsed it

一开始我是拿下面这个简短的代码做的实验 一开始onsubmit="return false"是这样写的 直接return false这样阻止表单提交的 这样点击按钮没有任何反应 后来我改成函数的形式阻止表单提交 就是下面的代码的样子 改成这样别人说可以阻止表单提交 但是我试的不可以啊 点击按钮并不是一点反应没有 点击后会有页面刷新而且地址栏的地址也会变后面会多一个? 跟之前直接return false一点不一样 第二段代码也是这个情况 用onsubmit="return check()" 什么都不填 直接点提交 也可以提交到数据库里面 并不能阻止提交 谁知道我的代码哪里有问题呢 为什么不能阻止提交?

<code>


    <title></title>
    <script type="text/javascript">
    function check(){
      return false;
    }
</script>


<form onsubmit="return check()">
<input type="submit" value="点击表单不会提交">
</form>

</code>
Copy after login
Copy after login

第二段

<code>


    <meta charset="utf-8">
    <title>
        
    </title>
    <style type="text/css">
    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}
    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}
    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}
    </style>
    <script src="ajax.js"></script>
    <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementsByTagName('input');
            var oIpt1=document.getElementById('ipt1');
            var oIpt2=document.getElementById('ipt2');
            var oIpt3=document.getElementById('ipt3');
            var oIpt4=document.getElementById('ipt4');
            var oSp1=document.getElementById('sp1');
            var oSp2=document.getElementById('sp2');
            var oSp3=document.getElementById('sp3');
            var oSp4=document.getElementById('sp4');
            var re=/^[\w]{6,12}$/;
            function check(){    
                 return false;       
            };
            oIpt1.onblur=function(){
                if(oIpt1.value==''){
                    this.style.border='1px solid red';
                }else{
                    ajax("nameajax.php?id="+oIpt1.value,function(str){
                    oSp1.innerHTML=str;
                    })
                }
            }; 
            oIpt2.onblur=function(){
               if(oIpt2.value==''){
                   this.style.border='1px solid red';
                   
               }else{
                     if(oIpt2.value.match(re)){
                         oSp2.innerHTML='密码合法';
                     }else{
                         oSp2.innerHTML='密码不合法';
                     }
               }
            }
            oIpt3.onblur=function(){
                if(oIpt3.value==''){
                   this.style.border='1px solid red';
               }else{
                   if(oIpt2.value==oIpt3.value){
                       oSp3.innerHTML='密码正确';
                   }else{
                       oSp3.innerHTML='密码不一致';
                   }
               }
            };
            oIpt4.onblur=function(){
                if(oIpt4.value==''){
                    this.style.border='1px solid red';
                }else{
                    ajax("emailajax.php?id="+oIpt4.value,function(str){
                    oSp4.innerHTML=str;
                    })
                }
                
            }; 
       };
    </script>


<div>
    <form action="reg.php" onsubmit="return check()" method="post">
        <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br>
        <span class="span1">密  码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br>
        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br>
        <span class="span1">邮  箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br>
        <button type="submit">提交</button>
    </form>
</div>


</code>
Copy after login
Copy after login

回复内容:

一开始我是拿下面这个简短的代码做的实验 一开始onsubmit="return false"是这样写的 直接return false这样阻止表单提交的 这样点击按钮没有任何反应 后来我改成函数的形式阻止表单提交 就是下面的代码的样子 改成这样别人说可以阻止表单提交 但是我试的不可以啊 点击按钮并不是一点反应没有 点击后会有页面刷新而且地址栏的地址也会变后面会多一个? 跟之前直接return false一点不一样 第二段代码也是这个情况 用onsubmit="return check()" 什么都不填 直接点提交 也可以提交到数据库里面 并不能阻止提交 谁知道我的代码哪里有问题呢 为什么不能阻止提交?

<code>


    <title></title>
    <script type="text/javascript">
    function check(){
      return false;
    }
</script>


<form onsubmit="return check()">
<input type="submit" value="点击表单不会提交">
</form>

</code>
Copy after login
Copy after login

第二段

<code>


    <meta charset="utf-8">
    <title>
        
    </title>
    <style type="text/css">
    div input{display: inline-block;width: 200px;height: 20px;border:1px solid #ccc;}
    div .span1{display: inline-block;width: 90px;height: 20px;text-align: left;margin-top: 20px;}
    div #sp1,#sp2,#sp3,#sp4{display: inline-block;width: 160px;height: 20px;}
    </style>
    <script src="ajax.js"></script>
    <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            var oInput=document.getElementsByTagName('input');
            var oIpt1=document.getElementById('ipt1');
            var oIpt2=document.getElementById('ipt2');
            var oIpt3=document.getElementById('ipt3');
            var oIpt4=document.getElementById('ipt4');
            var oSp1=document.getElementById('sp1');
            var oSp2=document.getElementById('sp2');
            var oSp3=document.getElementById('sp3');
            var oSp4=document.getElementById('sp4');
            var re=/^[\w]{6,12}$/;
            function check(){    
                 return false;       
            };
            oIpt1.onblur=function(){
                if(oIpt1.value==''){
                    this.style.border='1px solid red';
                }else{
                    ajax("nameajax.php?id="+oIpt1.value,function(str){
                    oSp1.innerHTML=str;
                    })
                }
            }; 
            oIpt2.onblur=function(){
               if(oIpt2.value==''){
                   this.style.border='1px solid red';
                   
               }else{
                     if(oIpt2.value.match(re)){
                         oSp2.innerHTML='密码合法';
                     }else{
                         oSp2.innerHTML='密码不合法';
                     }
               }
            }
            oIpt3.onblur=function(){
                if(oIpt3.value==''){
                   this.style.border='1px solid red';
               }else{
                   if(oIpt2.value==oIpt3.value){
                       oSp3.innerHTML='密码正确';
                   }else{
                       oSp3.innerHTML='密码不一致';
                   }
               }
            };
            oIpt4.onblur=function(){
                if(oIpt4.value==''){
                    this.style.border='1px solid red';
                }else{
                    ajax("emailajax.php?id="+oIpt4.value,function(str){
                    oSp4.innerHTML=str;
                    })
                }
                
            }; 
       };
    </script>


<div>
    <form action="reg.php" onsubmit="return check()" method="post">
        <span class="span1">用 户 名:</span><input type="text" id="ipt1" name="username" autocomplete="off"><span id="sp1"></span><br>
        <span class="span1">密  码:</span><input type="password" id="ipt2" autocomplete="off"><span id="sp2"></span><br>
        <span class="span1">确认密码:</span><input type="password" id="ipt3" name="password" autocomplete="off"><span id="sp3"></span><br>
        <span class="span1">邮  箱:</span><input type="text" id="ipt4" name="email" autocomplete="off"><span id="sp4"></span><br>
        <button type="submit">提交</button>
    </form>
</div>


</code>
Copy after login
Copy after login

<code>function check(){    
     return false;       
 };</code>
Copy after login

这一句不要放在window.onload里边,直接放在外层试试,我试过了可行

加断点跟踪一下吧~
return function中如果代码执行出问题 都是按照true来处理的~

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template