Vue Email Validator Component

Sastha K L
Aug 3, 2018 · 2 min read

Valid email IDs make all the difference when it comes to maintaining active user base for any web portal. So confirming an email validity takes importance during user registration.

Checking for valid email is pretty straightforward nowadays, Get user email and send a verification link to activate profile. We are hereby forcing user to validate their email if they need to use our service. Even-though this provides 100% valid user emails, they turn away customer who are looking for quick registration.

A middle ground would be to filter out invalid emails transparent to user, and keep numbers minimal and acceptable. Some methods which can be used are

  • Check if emails are from top level domains
  • Check if emails are from temporary domains
  • Custom White/Black list of email to filter email domains

The Component


  • VueJS
  • Bootstrap Vue
  • Lodash


  1. Install Dependency
npm install lodash --save
npm install bootstrap-vue --save

2. Add Email validation component

Copy component from here into your project component folder

3. Import Component into vue

Import `ValidatedInputEmail` component and use as below<validated-input-email
id= "test"
placeholder= "Enter email"
filter-top-level-domain= true
filter-temp-email-providers= true
:whitelisted-domains= "whitelisted_domains"
:blocked-domains= "blocked_domains"
v-on:response= "validateResponse"



  • `filter-top-level-domain` — values `true` / `false`
  • `filter-temp-email-providers` — values `true` / `false`
  • `whitelisted-domains` — array of domains to be whitelisted` [‘’, ‘’]`
  • `blocked-domains` — array of domains to be blocked` [‘’, ‘’]`

Callback event

`response` event is triggered on email validation.

Response Format

All responses are in JSON with 3 parameters

  • `status_code`
    + 0 — Valid email
    + 1 — Email has invalid format
    + 2 — Email is part of blocked list
    + 3 — Email is provided by temporary email service provider
    + 4 — Not a top domain email
  • `status_message` — helper messages for each status code
    + status_code = 0, “Valid Email”
    + status_code = 1, “Invalid Format”
    + status_code = 2, “Blocked Email”
    + status_code = 3, “Temp domain email”
    + status_code = 4, “Not Top domain email”

Sample Response

data : “
status_code : 0
status_message : “Valid Email”

Source Code

Demo / Download

Note: This is a soft email validation to provide a quick feedback to user . A robust email validation should have a backend module to verify email.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade