email 的表单验证在 Vuejs 中不起作用

Question

当我输入 email id时，仍然通知 Email 所需的错误消息。 截图： https://prnt.sc/pkw6ll我需要输入 email 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

我认为您必须重置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();
    }
},

Answer 2

要动态显示错误消息，您需要使用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 []
        }
     }
  },
})

让我知道这是否可行，还有更多优化可能。 如果它是一个子 email 表单，那么它将始终是一个输入，因此您可以将错误转换为 object 或只是一个清除您的 htmp v-for语句的字符串。

Answer 3

为输入字段编写验证规则并不总是最佳实践。

我建议使用https://www.npmjs.com/package/vee-validate package。

在 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 将创建一个错误数组并在它们发生时显示这些错误。