Блог

Главная - Вопросы по программированию - Проверьте, содержит ли htmlколлекция элемент с пустым значением

Проверьте, содержит ли htmlколлекция элемент с пустым значением

#javascript #html #vue.js

Вопрос:

Эй, у меня есть короткий вопрос. Я изучаю JS (Vue.js) на данный момент и сейчас у меня есть пример, где у меня есть несколько входных данных с тем же именем класса.

 <input class="checkInput" placeholder="firstname"/>
<input class="checkInput" placeholder="lastname"/>
<input class="checkInput" placeholder="age"/>
<button @click="saveData">Save</button>

Теперь, когда я нажимаю на кнопку сохранить, я запускаю метод, который предоставляет мне HTML-коллекцию всех входных данных с классом «checkInput».

 var val = document.getElementsByClassName("checkInput");

Теперь я хочу повторить эту коллекцию и проверить, пусто ли одно из входных значений.

  for (let item of val) {
        var y = item.value;
        
          if(y=="")
          {
            //Do save
          }
          else 
          {
            //Empty Input Message to the user
          }
}

Проблема в том, что, например, когда второй ввод пуст и я нажимаю кнопку сохранить, он выполняет метод сохранения либо потому, что он проверяет каждый элемент шаг за шагом. Как я могу сначала проверить всю коллекцию HTMLCollection, а затем выполнить метод? (И нет, я не хочу использовать форму)

Комментарии:

1. Ваш класс есть checkInput , но вы получаете элементы по имени класса inputCheck .

2. Не знаю, как насчет vue, но в голом ДОМЕ вы могли бы просто сделать document.querySelectorAll(".checkInput:placeholder-shown") .

Ответ №1:

Один из способов, которым вы можете сделать это в Vue.js

 new Vue({
  el: '#demo',
  data() {
    return {
      user: {
        first_name: '',
        last_name: '',
        age: null
      }
    }
  },
  methods: {
    saveData() {
      for (const [key, value] of Object.entries(this.user)) {
        if (!value) return alert(`${key} empty`)
        console.log(`${key}: ${value}`);
      }
    }
  }
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <input class="checkInput" placeholder="firstname" v-model="user.first_name" />
  <input class="checkInput" placeholder="lastname" v-model="user.last_name" />
  <input class="checkInput" placeholder="age" v-model="user.age" />
  <button @click.prevent="saveData">Save</button>
</div>
Метки: ,