Проверка формы для электронной почты, не работающей в Vuejs

Question

При вводе электронного письма id по-прежнему уведомляет по электронной почте требуется сообщение об ошибке. Снимок экрана: https://prnt.sc/pkw6ll Мне нужно при вводе электронного письма id сообщение об ошибке не будет отображаться.

HTML:

<form 
    class="footer-form" 
    id="footerform-details" 
      @submit="checkForm" 
      action="#"
      method="post"
  >
    <div class="form-group" id="footerbtn-tooltip">
      <input 
        type="email" 
        class="form-control" 
        placeholder="Your Email Address"        
        v-model="email"
      >
      <button type="submit">Submit</button>
    </div>
    <p v-if="errors.length">
      <b>Please enter the following input value</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
  </form>

JavaScript:

var subscribe = new Vue({

  el: '#footerform-details',
  data: { errors: [], email: null },
  methods: {
    checkForm: function (e) {

      if (this.email) { return true; }

      this.errors = [];

      if (!this.email) {
        this.errors.push('Email required.');
      } 
      e.preventDefault();
    }
  },
})

Answer 1

Для динамического отображения сообщения об ошибке вам необходимо использовать значения watchers или computed. Для этой цели вычисленные значения, вероятно, являются лучшим выбором. Попробуйте это

<form 
    class="footer-form" 
    id="footerform-details" 
      @submit="checkForm" 
      action="#"
      method="post"
  >
    <div class="form-group" id="footerbtn-tooltip">
      <input 
        type="email" 
        class="form-control" 
        placeholder="Your Email Address"        
        v-model="email"
      >
      <button type="submit">Submit</button>
    </div>
    <p v-if="errors.length">
      <b>Please enter the following input value</b>
      <ul>
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </p>
  </form>

Мы оставляем метод отправки как есть. и добавьте свойство компьютера. Это будет реагировать каждый раз, когда пользователь вводит письмо.

var subscribe = new Vue({

  el: '#footerform-details',
  data: { email: null },
  methods: {
    checkForm: function (e) {
      e.preventDefault();
      if (this.email) { return true; }

      this.errors = [];

      if (!this.email) {
        this.errors.push('Email required.');
      } 
    }
  },
  computed: {
     errors: function() {
        if (!this.email) {
          return ['Email required.']; // can make it [...this.errors, 'Email required.']
        } else {
          return []
        }
     }
  },
})

Дайте мне знать, если это работает, возможны дополнительные оптимизации. Если это форма электронной почты подписки, то это всегда будет один ввод, так что вы можете преобразовать ошибку в объект или просто строку, очищающую также ваш оператор htmp v-for.

Answer 2

Написание правил проверки для полей ввода не всегда рекомендуется.

Я предлагаю использовать https://www.npmjs.com/package/vee-validate пакет.

Импортировать плагин в main.js Затем использовать его какпоказано ниже.

Обязательно присвойте имя элементу, который вы хотите проверить

<template>
<div>
    <input type="text" v-model='email' name="email" v-validate="'required|email'"/>
    <span v-if="errors.has('email')">{{errors.first('email')}} </span>  
    //..you don't have to create any errors array plugin will do it.
</div>
</template>
<script>
   export default{
        data(){
         email:null,
        }
   }
</script>

Теперь вам не нужно самостоятельно писать какие-либо правила проверки. v-validate создаст массив ошибок и покажет эти ошибки в случае их возникновения.

Answer 3

Я думаю, вам нужно сбросить this.errors = []; до if(this.email), как

methods: {
    checkForm: function (e) {
        this.errors = [];
        if (this.email) {
            return true;
        }



        if (!this.email) {
            this.errors.push('Email required.');
        } 
        e.preventDefault();
    }
},