javascript - 电子邮件的表单验证在 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

要动态显示错误消息，您需要使用观察者或计算值。为此，计算值可能是更好的选择。试试这个

<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>

我们保留提交方法不变。并添加计算机属性。每次用户输入字母时，这都会使用react。

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 语句。