zoukankan      html  css  js  c++  java
  • onsubmit表单验证

     1 <script type="text/javascript">
     2 function check(){
     3     var username=document.getElementById('username');
     4     var password=document.getElementById('password');
     5     //防止用户输入空格也验证通过
     6     if (!(username.value.replace(/s*/g,'')&&password.value.replace(/s*/g,''))){
     7         username.focus();
     8         return false;
     9     }else{
    10         //document.forms[0].login.disabled=true;
    11         document.getElementById('login').disabled=true;
    12         document.getElementById('login').value='登录中';
    13         return true;
    14     }
    15 }
    16 </script>
     1 <form action="test.php" method="get" id="test" onsubmit="return check()">
     2 <label for="username">用户名 : </label><input id='username' name="username" type="text" />
     3 <label for="password">密 码 : </label><input id="password" name="password" type="password"/>
     4 <input type="submit" value="登陆" id="login" name="login" />
     5 </form>
     7 <!--<button type="submit">提交</button>
     8 下面的默认不会触发onsubmit()事件
     9 <input type='button' value='提交'/>
    10 <button onclick="_submit()">提交</button>-->

    非行间事件的写法

     1 var obj = document.getElementById('myform'); 
     2 var check = function(){ 
     3     var username=document.getElementById('username');
     4     var password=document.getElementById('password');
     5     if (!(username.value.replace(/s*/g,'')&&password.value.replace(/s*/g,''))){
     6         return false; 
     7     }else{ 
     8         return true; 
     9     } 
    10 } 
    11 obj.onsubmit = function(){ 
    12 return check(); 
    13 }
    14 // 这样写不能实现阻止表单提交
    15 // obj.onsubmit = function(){ 
    16 //     var username=document.getElementById('username');
    17 //     var password=document.getElementById('password');
    18 //     if (!(username.value.replace(/s*/g,'')&&password.value.replace(/s*/g,''))){
    19 //         return false; 
    20 //     }else{ 
    21 //         return true; 
    22 //     } 
    23 // }

     更新一下:为什么不写return就不能提交了呢?

    1、<form id="myform" action="test.php" method="get" id="test" onsubmit="return check()"></form>
    2、<form id="myform" action="test.php" method="get" id="test" onsubmit="check()"></form>
    3、<form id="myform" action="test.php" method="get" id="test"></form>
    
    var obj = document.getElementById('myform'); 
    
    ========================================================================================
    
    obj.onsubmit = function(){ 
        var username=document.getElementById('username');
        var password=document.getElementById('password');
        if (!(username.value.replace(/s*/g,'')&&password.value.replace(/s*/g,''))){
            return false; 
        }else{ 
            return true; 
        } 
    }
    
    ========================================================================================
    
    var check = function(){ 
        var username=document.getElementById('username');
        var password=document.getElementById('password');
        if (!(username.value.replace(/s*/g,'')&&password.value.replace(/s*/g,''))){
            return false; 
        }else{ 
            return true; 
        } 
    } 
    
    ========================================================================================
    
    obj.onsubmit = function(){ 
    return check(); 
    }

      onsubmit是form表单对象的一个属性;其值表面上是一个字符串,但是如果有表单提交它会执行这个字符串,根据返回值的布尔值来确定是否提交表单.
    和eval和setTimeout第一个参数传字串执行差不多(这个我也写了一篇blog,关于eval变量污染的问题什么的:点这里);
    如上面的2,当表当提交的时候首先检查onsubmit的字串执行后得到的值:而check函数返回的值是false,也即是onsubmit="check()"-->onsubmit="false";
    这样onsubmit为一个字串并不为布尔值false;所以并不能阻止表单的提交.
    如果是onsubmit="return check()";这样的话得到onsubmit="return false";字串依然是一句js代码继续执行得到onsubmit=false; OK,感觉这样差不多

    另外的一种理解方法 :

    把onsubmit当作是表单对象的一个原型方法默认onsubmit = "return true";-->

    Form.prototype.onsubmit = function() {
        return true;
    };
    如果onsubmit="check()";即是这样
    Form.prototype.onsubmit = function() {
        check(); 
        return true;
    };
    也即:
    Form.prototype.onsubmit = function() {
        false;
        return true;
    };
    这样即使执行onsubmit方法内的check()得到false,但是并没有对false进行任何操作,所以并不能覆盖原来的true,所以并不能阻止表单提交
    Form.prototype.onsubmit = function() {
        return check(); 
        return true;
    };
    也即:
    Form.prototype.onsubmit = function() {
        return false;
        return true;
    };
    OK! return true被覆盖;
  • 相关阅读:
    python中的编码问题
    CVPR2018 Tutorial 之 Visual Recognition and Beyond
    hdu 1376 Octal Fractions
    hdu 1329 Hanoi Tower Troubles Again!
    hdu 1309 Loansome Car Buyer
    hdu 1333 Smith Numbers
    hdu 1288 Hat's Tea
    hdu 1284 钱币兑换问题
    hdu 1275 两车追及或相遇问题
    hdu 1270 小希的数表
  • 原文地址:https://www.cnblogs.com/cdwp8/p/4039743.html
Copyright © 2011-2022 走看看