onsubmit表单验证

<script type="text/javascript">
function check(){
    var username=document.getElementById('username');
    var password=document.getElementById('password');
    //防止用户输入空格也验证通过
    if (!(username.value.replace(/\s*/g,'')&&password.value.replace(/\s*/g,''))){
        username.focus();
        return false;
    }else{
        //document.forms[0].login.disabled=true;
        document.getElementById('login').disabled=true;
        document.getElementById('login').value='登录中';
        return true;
    }
}
</script>

<form action="test.php" method="get" id="test" onsubmit="return check()">
<label for="username">用户名 : </label><input id='username' name="username" type="text" />
<label for="password">密　码 : </label><input id="password" name="password" type="password"/>
<input type="submit" value="登陆" id="login" name="login" />
</form>
<!--<button type="submit">提交</button>
下面的默认不会触发onsubmit()事件
<input type='button' value='提交'/>
<button onclick="_submit()">提交</button>-->

非行间事件的写法

var obj = document.getElementById('myform'); 
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(); 
}
// 这样写不能实现阻止表单提交
// 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; 
//     } 
// }

 更新一下：为什么不写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被覆盖;