[程式類]-JQuery .each 迴圈如何停止

在網頁上, 我們時常使用JQuery選擇器來做畫面上的檢核。尤其在畫面很複雜，輸入的欄位取相同的名稱時更常用到.each()這個迴圈功能，來判斷類似欄位的長度大小，數值等等。

舉個小小的例子, 在程式要送出之後, 做完檢查之後, 若發現在有長度超過的情況, 則彈出警示視窗, 並且停留在本頁。

以下為Javascritp中應用Jquery的程式碼:

dofrmSubmit()   {
if(!ChkFields()){return;}

frm1.submit();
}

function ChkFields()   {
$('input[name=Memo]').each(function(index){
if($(this).val().length >= 19)   {
alert("所輸入文字不得超過19個字元!!請查核!!");
return false;       //quit .each() loops
}
});

if($('input[name=Money]').val()=="") {
alert("請輸入金額欄位!");
return false;
}
}

在畫面上我們故意打了金額(Money),  但是在備註欄位(Memo)故意找其中一個, 打入長度過長的測試字串;

但為何使用了檢核後, 程式也照實的跳出警示訊息, 但是奇怪的地方來了...這一頁怎麼還被送出了呢?

原因在要跳出.each 的迴圈, return false; 是讓他中斷整個迴圈，話說程式檢查到問題，也中斷了，但是第二段ChkFileds()並沒有真的return false; (因為被.each用掉了)

所以在這裡要多設計一個flag，如果整個.each中有問題, 要把這個flag設定成true, 如下所示..

function ChkFields()   {
var CheckFailed = false;
$('input[name=Memo]').each(function(index){
if($(this).val().length >= 19)   {
alert("所輸入文字不得超過19個字元!!請查核!!");
CheckFailed = true;
return false; //跳出.each
}
});
if(CheckFailed == true)   {
return false;                     //ChkFields傳回 false;
}

if($('input[name=Money]').val()=="") {
alert("請輸入金額欄位!");
return false;
}
}

可以看到我檢核的部分加上紅色字體的部份，再多上一個flag(CheckFailed )來紀錄是否曾經有誤, 而利用這個flag, 判斷後再傳回false, 來達成這整個的效果~~

否則, 第一個出現的return false, 僅僅是跳出.each loop而已哦~~