使用jQuery验证两个模块的所有字段是否已完成的最有效方法？

Question

以下代码检查以确保用户已完成至少两个模块的三个值（使用jQuery动态添加）。

如何更新以提高效率？

if ( $('.product-name').eq(0).val() == '' && $('.product-url').eq(0).val() == '' && $('.product-category').eq(0).val() == '' ) {
  console.log('Please complete at least two modules.');
}

if ( $('.product-name').eq(1).val() == '' && $('.product-url').eq(1).val() == '' && $('.product-category').eq(1).val() == '' ) {
  console.log('Please complete at least two modules.');
}

Answer 1

我可能会将您的jQuery结果存储为数组，然后将其写为循环，这样您就不会多次运行选择器。

注意：使用.toArray()时，您会获得DOM元素，而不是jQuery对象，因此稍微修改了JavaScript。

var completeCount = 0;
var productNames = $('.product-name').toArray();
var productUrls = $('.product-url').toArray();
var productCategories = $('.product-category').toArray();

for(var i = 0; i < productNames.length; i++) {
  if (productNames[i].value !== '' && productUrls[i].value !== '' && productCategories [i].value !== '') {
    completeCount++;
  }
  if (completeCount === 2) {
    break;
  }
}

if (completeCount < 2) {
  console.log('Please complete at least two modules.');
}