[Vuejs]-How to check if the email exist in vue.js user registration?

by

0👍

✅

Best practice is to validate the email while filling the form itself by using @keyup, @blur or @change event as per the requirement. For Demo, I am using @keyup event to validate the email address.

Demo :

new Vue({
  el: '#app',
  data: {
    form: {
        email: null
    },
    emailMessage: ''
  },
  methods: {
    validateEmailAddress() {
      if (!this.form.email) {
        this.emailMessage = ''
        return;
      }
      // API call will be happen here to validate the entered email address.
      // For now i am just using mock response (assume you are getting this list from API or you can also get the boolean value) for the demo.
      const response = ['abc@gmail.com', 'def@gmail.com', 'alpha@gmail.com', 'beta@gmail.com'];
      this.emailMessage = (response.includes(this.form.email)) ? 'Email already exist' : 'Hurray! Good to Go';
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="email" v-model="form.email" placeholder="Email Address" @keyup="validateEmailAddress"/>
  <p>{{ emailMessage }}</p>
</div>

0👍

You can do it in multiple ways. One way is to call a function on email input event, so that each time the user enters a character an endpoint is called to check if the email is already available.

<v-text-field type="email" v-model="form.email" placeholder="Email Address" @input="debouceCheckEmail" />

PS. You can use lodash to debounce endpoint calls to database.

import { debounce } from 'lodash';
export default {
   methods: {
     debouceCheckEmail() {
       debounce(function () {
          //check entry in database         
       }, 500);
     }
   }
}

Leave a comment