[原创]表单验证之return与return false

　　PS：最近渣渣在学JS 想找个实习来着 太渣没人要= = 马上大四了 吃枣药丸

　　　　在学习JS基础教程上的表单验证的例子时，发现了这个问题。

　　众所周知，使用return可以中止当前函数的运行，return其后的语句不再运行。但是对于表单提交，单单一个return却不够，下面我们来看一下，return和return false在表单提交的时候有什么区别。

下面的JS代码对原代码进行了修改，个人认为利于理解

//此例用于验证表单是否为空、密码是否一致

window.onload = initForm;
function initForm(){
　　for(var i = 0; i < document.forms.length; i++)    //遍历每一个表单
　　document.forms[i].onsubmit = validForm;
}
function validForm(){
　　var allTags = this.elements;
　　//var tmp = "";　　　　　　　　　　//用于记录密码（用于对密码的再输入校验）
　　for(var i = 0; i < allTags.length; i++){
　　　　if(!validTag(allTags[i]))
　　　　　　return false;
　　　　/*if(allTags[i].type == "password"){ //输入为密码
　　　　　　if(tmp == "")
　　　　　　　　tmp = allTags[i].value;
　　　　　　else if(tmp != allTags[i].value){
　　　　　　　　addStyle(allTags[i]);
　　　　　　　　return false;
　　　　　　}
　　　　　　else delStyle(allTags[i]);
　　　　}*/
　　}
　　return true;
}

//这里仅考虑了文本框、下拉菜单的情况

function validTag(thisTag){

　　//非sumbit或者reset选项
　　if(thisTag.nodeName != "SUBMIT" && thisTag.nodeName != "RESET"){  
　　　　if(thisTag.className.indexOf("reqd") > -1){　　　　　　//必填字段

　　　　　　if(thisTag.value == "" || thisTag.value == " "){　//值为空或者空白

　　　　　　　　return addStyle(thisTag);       //增加样式　　　　　　　　
　　　　　　}
　　　　　　delStyle(thisTag);　　　　//删除样式
　　　　}
　　}
　　return true;
}
function addStyle(thisTag){
　　if(thisTag.parentNode.nodeName == "LABEL")
　　　　thisTag.parentNode.className += " invalid"
　　thisTag.className += " invalid";
　　thisTag.focus();
　　if(thisTag.nodeName == "INPUT")
　　　　thisTag.select();
　　return false;
}
function delStyle(thisTag){
　　if(thisTag.className.indexOf("invalid") > -1)
　　　　thisTag.className = thisTag.className.replace(" invalid", "");
　　if(thisTag.parentNode.className.indexOf("invalid") > -1)
　　　　thisTag.parentNode.className = thisTag.className.replace(" invalid", "");
}

　　代码不用多说，都能看懂，问题在于红色标注的return false。

　　那么首先把return false改为return吧，这里函数也没要求返回参数不是？那就用return就够了，我刚开始就是这么想的。

这是需要验证的页面，很简单的一个用户名、密码还有个确认密码（无视即可）

赶紧就这么空白提交试试

阿里？哪里不对啊，注意地址栏显示?#（如下图），我的表单的默认提交地址就是#，因此可以得出此时表单已经提交，而且对于未通过验证的单元，我加了样式，背景色红色。

细心的人可能发现：上图的GIF动画中，表单的用户名（Your Name）确实被标记成红色，但是一闪就没了，成为了提交表单。

经过一番研究（百度啊，坐椅子上转圈啊等），才得知return虽然中止了对表单元素的验证，但是并未阻止表单的提交，相当于前功尽弃。

在表单提交之中，return和return false的区别就在于此（转了一下午椅子总算学点东西ORZ）

那么还不快改为return false试试

这下点击submit之后，正常了吧~