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之后，正常了吧~