JS(Vue.js)中如何判断HTMLCollection是否存在值为空的input元素

问题原因 #

你当前的逻辑是每遍历到一个输入框就单独判断是否执行保存/提示逻辑，只要前序输入框符合非空条件就会触发保存操作，不会等待所有输入框校验完成。

修复方案（兼容你当前的DOM操作写法） #

修改saveData方法逻辑，先做全量校验，再统一执行后续操作：

function saveData() {
  const inputs = document.getElementsByClassName("checkInput");
  // 标记是否所有输入框都合法
  let isAllValid = true;
  // 可选：收集空输入框的提示信息
  let emptyFields = [];

  for (let item of inputs) {
    const val = item.value.trim();
    if (val === "") {
      isAllValid = false;
      emptyFields.push(item.placeholder);
    }
  }

  // 全部校验完成后再判断分支
  if (isAllValid) {
    // 执行保存逻辑
    console.log("所有输入合法，执行保存");
  } else {
    // 统一提示空输入
    alert(`以下字段不能为空：${emptyFields.join('、')}`);
  }
}

Vue 更推荐的实现方案（无需操作DOM，符合框架开发范式） #

如果不需要强制用原生DOM操作，可以通过双向绑定实现更简洁的校验：

1. 模板部分绑定v-model到表单数据对象：

<template>
  <div>
    <input v-model="formData.firstname" placeholder="firstname"/>
    <input v-model="formData.lastname" placeholder="lastname"/>
    <input v-model="formData.age" placeholder="age"/>
    <button @click="saveData">Save</button>
  </div>
</template>

2. 逻辑部分直接校验数据即可：

export default {
  data() {
    return {
      formData: {
        firstname: '',
        lastname: '',
        age: ''
      }
    }
  },
  methods: {
    saveData() {
      const isAllValid = Object.values(this.formData).every(val => val.trim() !== '');
      if (isAllValid) {
        // 执行保存逻辑
      } else {
        alert('存在必填项为空，请检查后重试');
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者FloHaberfellner