电子邮件的表单验证在 Vuejs 中不起作用答案

【问题标题】：Form validation for email not working in Vuejs电子邮件的表单验证在 Vuejs 中不起作用
【发布时间】：2019-10-18 05:21:42
【问题描述】：

当我输入电子邮件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();
    }
  },
})

【问题讨论】：

标签： javascript html vue.js vuejs2

【解决方案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 语句。

【讨论】：

您好，先生，计算属性区域显示错误prnt.sc/pkwvzj。显示“缺失”错误。请先生澄清一下。
已修复，忘记在计算属性后添加function()。
没关系。现在它工作正常。感谢您支持以另一种方式进行简单的带有验证的订阅表单。

【解决方案2】：

我认为你必须在if(this.email) 之前重置this.errors = []; 就像

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



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

【讨论】：

感谢您的留言，您的信息很有帮助。但是，我在我的代码中发现了一个错误。我在结尾之前放了一个逗号 Vue 实例。这就是问题。感谢您的支持！

【解决方案3】：

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

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

在 main.js 中导入插件然后如下图使用。

确保将 name 指定给要验证的元素

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

【讨论】：