Проверка формы в vue

Question

Я пытаюсь понять и обойти, чтобы проверить простую форму, но проблема, с которой я сталкиваюсь, заключается в том, что при загрузке страницы отображается сообщение «Ошибка» или «Успех», которое должно отображаться только на keypressили mouseout событие.

Более того, я не могу понять, как проверить раскрывающийся список, и, наконец, когда пользователь нажимает кнопку «Отправить», он может проверить, все ли поля заполнены и правильно ли заполнить форму.Ниже приведен мой код и моя ссылка на JSFiddle

HTML

<div id="app">
  <div>
    <label for="name">Name</label>
    <input type="text" @keypress="checkField" v-model="name">
    <span v-if="checkName">Checks out </span>
    <span v-if="!checkName">Pleas enter valid name</span>
  </div>

  <div>
    <label for="Age">Age</label>
    <input type="number" @keypress="checkField2" v-model="age">
    <span v-if="checkAge">Enter Valid Age </span>
    <span v-if="!checkAge">Not a valid age</span>
  </div>

<div>
  <select name="" id="">
    <option disabled selected>Please Choose</option>
    <option v-for="gender in genders" :value="gender">
      {{gender}}
    </option>
  </select>
  <span v-if="genderField">Please select a gender</span>
  <span v-if="!genderField">Green means go</span>
</div>
 <div>
   <button @click="checkSubmit(e)">Submit</button>
 </div>
</div>

JS

 data: {
    name: "",
    checkName: "",
    age: "",
    checkAge: "",
    genders : ["Male",'Female',"Other"],
    genderField: "" 
  },
  methods: {
    checkField() {
      if (!this.amount) {
        this.checkName = true
      }
    },
    checkGender() {
                if(!this.genders){
            this.genderField = true
        }
    },
    checkSubmit(e){
        //check if all fields are filled before submitting
      alert("it is working")
      e.preventDefault()
    }
  }

})

Answer 1

Существует множество способов проверки форм.У меня есть несколько советов для такого рода случаев.

1) Используйте элемент form с обработчиком событий @submit.prevent="...".Это обеспечит лучшее взаимодействие с пользователем;

2) Не используйте @key* обработчики событий для проверки или форматирования значения, вместо этого используйте @input.Это избавит вас от головной боли;

3) Vue предоставляет API для наблюдения за всеми изменениями атрибута, а не только при изменении пользователем.

Для решения вашей проблемы вы можете создать атрибут validation и настроить его содержимое в соответствии с изменением других атрибутов.

См. Пример ниже:

Кстати: я рекомендуючто вы посмотрите на vuelidate

const app = new Vue({
  data() {
    return {
      name: null,
      age: null,
      gender: null,
      genders: ['Male', 'Female', "Other"],
      validations: {}
    }
  },
  methods: {
    submit(e) {
      const keys = Object.keys(this.validations);

      // required fields
      const required = ['name', 'age', 'gender'];
      for (const key in required) {
        if (!keys.includes(required[key])) {
          alert('Please, insert a ' + required[key]);
          return;
        }
      }

      for (const key in this.validations) {
        if (!this.validations[key]) {
          alert('Please, insert valid ' + key);
          return;
        }
      }
      alert("ok");
    }
  },
  watch: {
    name(newValue) {
      this.validations.name = newValue > '';
    },
    age(newValue) {
      this.validations.age = newValue > 0;
    },
    gender(newValue) {
      this.validations.gender = this.genders.includes(newValue);
    }
  }
});

app.$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit.prevent="submit">
    <div>
      <label for="name">Name</label>
      <input type="text" v-model="name">
      <span v-if="'name' in validations && validations.name">Checks out </span>
      <span v-if="'name' in validations && !validations.name">Pleas enter valid name</span>
    </div>

    <div>
      <label for="age">Age</label>
      <input type="number" v-model="age">
      <span v-if="'age' in validations && !validations.age">Enter Valid Age</span>
    </div>

    <div>
      <label for="gender">Gender</label>
      <select name="gender" v-model="gender">
    <option disabled selected>Please Choose</option>
    <option v-for="gender in genders" :value="gender">
      {{gender}}
    </option>
  </select>
      <span v-if="'gender' in validations && validations.gender">Green means go</span>
      <span v-if="'gender' in validations && !validations.gender">Please select a gender</span>
    </div>

    <input type="submit" value="Submit">
  </form>
</div>