Vue Email Validation

Nov 8, 2022

To validate an email input in Vue, you should bind the input's value to a variable using v-model and use one of the methods for email validation in vanilla JavaScript. For example, the following example validates whether the input is valid whenever the value of the input changes using a relatively simple regular expression.

Vue.createApp({
  data: () => ({ email: 'john@gmail.com' }),
  computed: {
    isValidEmail() {
      return /^[^@]+@\w+(\.\w+)+\w$/.test(this.email);
    }
  },
  template: `
  <div>
    <div>
      <input v-model="email" />
    </div>
    <div>
      Email is {{isValidEmail ? 'valid' : 'invalid'}}
    </div>
  </div>
  `
}).mount('#example');

Below is a live example.

Validating Email on Button Click

The previous example validates the email immediately whenever the input changes. This isn't necessarily the right way to go for a good user experience. For example, if the input were empty by default, the user would see that the email was invalid immediately.

A common approach is to delay validating the email until the user clicks a button. For example, suppose you have a registration form that asks the user to enter their email and password. You can instead validate the email when the user submits the form.

Vue.createApp({
  data: () => ({ email: '', password: '', errors: null }),
  methods: {
    async submitForm() {
      const errors = {};
      if (!this.email) {
        errors.email = 'Email is required';
      } else if (!/^[^@]+@\w+(\.\w+)+\w$/.test(this.email)) {
        errors.email = 'Invalid email';
      }

      if (Object.keys(errors).length > 0) {
        this.errors = errors;
        return;
      } else {
        this.errors = null;
      }

      // Handle submitting form
    }
  },
  template: `
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <input v-model="email" placeholder="email" />
        <div v-if="errors && errors.email">
          {{errors.email}}
        </div>
      </div>
      <div>
        <input type="password" v-model="password" />
      </div>
      <div>
        <button type="submit">Register</button>
      </div>
    </form>
  </div>
  `
}).mount('#example2');

Below is a live example.


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!