![[原创]表单验证之return与return false](/0.jpg)
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之后，正常了吧~