javascript - 遍历所有不是文件类型的输入项

Question

我有以下代码用作输入字段的验证。但是，我被卡住了，因为它也在检查输入文件类型字段，我不希望它这样做。有没有办法让它忽略文件输入字段？

function validateForm() {
  // This function deals with validation of the form fields
  var x, y, i, valid = true;
  x = document.getElementsByClassName("tab");
  y = x[currentTab].getElementsByTagName("input");
    
  // A loop that checks every input field in the current tab:
  for (i = 0; i < y.length; i++) {
      
     //I only want the following condition statement to run if the current element is not a file field. 
      
    // If a field is empty...
    if (y[i].value == "") {
      // add an "invalid" class to the field:
      y[i].className += " invalid";
      // and set the current valid status to false
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    document.getElementsByClassName("step")[currentTab].className += " finish";
  }
  return valid; // return the valid status
}

Answer 1

一个选择是使用 querySelectorAll 代替，并使用 :not([type="file"]):

y = x[currentTab].querySelectorAll('input:not([type="file"])');

除了 Javascript 之外，您还可以考虑将字段设置为必填 以帮助改进 UI。

要重构一点，考虑使用更有意义的变量名，并使用 classList.add 以避免向元素添加重复的类属性:

function validateForm() {
  const thisTab = document.getElementsByClassName("tab")[currentTab];
  const inputs = thisTab.querySelectorAll('input:not([type="file"])');
  let valid = true;
  for (const input of inputs) {
    if (input.value === '') {
      input.classList.add('invalid');
      valid = false;
    }
  }
  // If the valid status is true, mark the step as finished and valid:
  if (valid) {
    thisTab.classList.add('finish');
  }
  return valid; // return the valid status
}