Vue.js 中的电子邮件验证

Question

我已经用 Vue 工作了 24 小时，所以请原谅我的无知。我已经四处搜索，我正在接近，但我确定这是我缺乏理解和基本原则。

我有一个在单击按钮时打开的模式。此模式显示带有电子邮件输入的表单。我设法使模式正常工作，但是当我输入错误的电子邮件时没有任何反应。

这是我的组件代码：

<template>
<div>
  <!-- Aside -->
  <aside class="aside">
    <button class="aside__btn button" @click="showModal = true">
      Send Me The Tips
    </button>
  </aside>

  <!-- Modal -->
  <div class="modal" v-if="showModal">
    <div class="modal-container">
      <a href="#" class="close" @click="showModal = false"></a>

      <p class="modal__steps">Step 1 of 2</p>
      
      <div class="relative">
        <hr class="modal__divider" />
      </div>

      <div class="modal__heading-container">
         <p class="modal__heading">Email Your Eail To Get <span class="modal__heading-span">Free</span>
         </p>
         <p class="modal__heading">iPhone Photography Email Tips:</p>
      </div>

      <form> 
        <input for="email" type="email" placeholder="Please enter your email here" required v-model="email">
        <span class="floating-placeholder" v-if="msg.email">{{msg.email}}</span>
        <!-- <span class="floating-placeholder">Please enter your email here</span> -->
        <button class="modal__button button">Send Me The Tips</button>
      </form>
    </div>
  </div>
  </div>
</template>

<script>
  export default ({
    data () {
      return {
        showModal: false,
        email: '',
        msg: [],
      }
    }, 
    watch: {
      email(value) {
        // binding this to the data value in the email input
        this.email = value;
        this.validateEmail(value);
      }
    },
    methods: {
      validateEmail(value){
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
    {
      this.msg['email'] = '';
    } else{
      this.msg['email'] = 'Please enter a valid email address';
    } 
      }
    }
  })
</script>

如果这很重要，我正在使用 Laravel。

Answer 1

我会删除手表并在模糊上添加一个事件侦听器，如下所示：

<input for="email" type="email" placeholder="Please enter your email here" required v-model="email" @blur="validateEmail" >

并像这样更新 validateEmail 方法：

validateEmail() {
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email)) {
        this.msg['email'] = 'Please enter a valid email address';
    } else {
        this.msg['email'] = '';
    }
}

@change如果它更好地满足您的需求，您还可以更改事件侦听器以进行更改。