Vue Email Validator Component
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
- Bootstrap Vue
- 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
placeholder= "Enter email"
- `filter-top-level-domain` — values `true` / `false`
- `filter-temp-email-providers` — values `true` / `false`
- `whitelisted-domains` — array of domains to be whitelisted` [‘1to1mail.org’, ‘asd234.com’]`
- `blocked-domains` — array of domains to be blocked` [‘1to1mail.org’, ‘asd234.com’]`
`response` event is triggered on email validation.
All responses are in JSON with 3 parameters
+ 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”
data : “email@example.com”
status_code : 0
status_message : “Valid Email”
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.