jQuery檢查至少五個輸入中是否包含數據

Question

我在頁面上有很多輸入，需要強制至少填寫5個項目。 如果沒有，則顯示一條消息，提示您必須至少填充5個。到目前為止，我已經嘗試了以下操作，但它一次又一次地顯示錯誤。 這樣做的正確方法是什么？

$('div.inputs input').each(function(i) {
    $input = $(this);
    while (i < 5) {
        if ($($input).val() == '') {
            alert('must fill at least 5 items!');
        }
    }
});​

Answer 1

您可以創建一個更好的選擇器，然后：

 
 
 
  
  if ($('div.inputs input[value!=""]').length < 5) { alert('must fill at least 5 items!'); }
 
  

說明：

div.inputs input[value!=""]選擇器選擇在 value屬性中包含某些內容的所有輸入字段，然后可以獲取所選項目的長度。

先前的解決方案有效（某種程度上），但我建議一個更好的解決方案：

 if ($('div.inputs input').filter(function () { return $(this).val().length > 0; }).length < 5) { alert('must fill at least 5 items!'); } 

Answer 2

KARASZIIstván的答案中顯示的方法比較整潔，但是就解釋代碼有什么問題以及如何解決它而言，（主要）問題是while條件：

while(i<5)

...正在評估變量i ，該變量不會被循環的內容更改。 在.each()循環的第一次迭代中， i為0，因此while條件為true 並保持為true，因此您將獲得一個無限循環。

為了保持代碼的一般結構並遍歷每個輸入測試值，您可以執行以下操作：

var filled = 0;

$('div.inputs input').each(function (i) {
    if (this.value != '') {
        filled++;
        if (filled === 5)
           return false;
    }
});

if (filled < 5) {
    alert('must fill at least 5 items!');
}

也就是說，對於每個非空白的輸入，增加一個計數器，然后在循環后檢查該計數器。 請注意，從.each()回調函數內部返回false立即停止.each()循環； 達到最低5個非空值后，無需繼續計數。