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个非空值后，无需继续计数。