Email Verification System with JavaScript.How to create an email verification system with JavaScript?
If you want to create an email verification system with JavaScript, this article will explain to you in detail the code of this article.
The first thing you need to know about JavaScript email verification is HTML and CSS because with HTML CSS you need to have a nice structure and style so that your form is attractive and eye-catching.
Now if you do not know HTML or CSS then you can go to YouTube and learn by watching HTML and CSS tutorials.
To verify email with JavaScript, you need to know a number of functions, some of which area addEventListener, if-else conditions,smtpjs api . If you have a good idea about these topics then you too can easily create an email verification system with JavaScript.
Here is some code for Gmail verification====================>
index.html page
<!DOCTYPE html>
<html>
<head>
<title>sign up from</title>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
</head>
<body>
<style type="text/css">
body{
background-image: url("1.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#sm{
width: 20rem;
}
#name,#email,#pass,#conpass{
height: 50px;
width: 500px !important;
}
#im{
border-radius: 50px;
}
.ids{
background-color: black;
background-size: cover;
}
@media (max-width: 600px){
.ids{
background-color: black;
padding: 5px !important;
}
#name,#email,#pass,#conpass{
height: 50px;
width: 350px !important;
}
}
@media (max-width: 768px){
.ids{
background-color: black;
padding: 0px !important;
}
#name,#email,#pass,#conpass{
height: 50px;
width: 400px !important;
}
}
@media (max-width: 480px){
#name,#email,#pass,#conpass{
height: 50px;
width: 300px !important;
}
}
@media (min-width: 992px){
.ids{
background-color: black;
width: 700px
}
}
</style>
<div class="container" >
<center>
<div class="ids p-5 mt-5">
<img src="2.png" width="80px" id="im"><br> <br>
<form action="verify.html" method="get">
<input type="text" name="name" id="name" placeholder=" your name" required="" class="p-2 form-control"><br>
<input type="email" name="email" id="email" placeholder=" your email" required="" class="p-2 form-control "><br>
<input type="text" name="pass" id="pass" placeholder=" your password" required="" class="p-2 form-control "><br>
<input type="text" name="conpass" id="conpass" placeholder="confirm password" required="" class="p-2 form-control "><br>
<input type="submit" name="sub" value="singup" class="btn btn-info font-weight-bold"
id="conpasss" >
</form>
</div>
</center>
</div>
<script type="">
let next = document.getElementById('conpasss');
next.addEventListener("click",function(e){
//e.preventDefault();
let email = document.getElementById('email').value;
let password = document.getElementById('pass').value;
let name = document.getElementById('name').value;
let conpassword = document.getElementById('conpass').value;
console.log(email);
if (email=='') {
swal({
title: "Email warning!",
text: "please enter your email !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password==""){
swal({
title: "Password warning!",
text: "please enter your password !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password =="12345678"){
swal({
title: "normal password!",
text: "please provide a strong password !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}else if(password.length<8){
swal({
title: "password issue!",
text: "password should be at last 8 charckter!",
icon: "warning", //note you can write here error or warning or info
button: "ok",
})
}
else{
swal({
title: "Good job!",
text: "congratulation!",
icon: "success", //note you can write here error or warning or info
button: "ok",
})
}
})
</script>
</body>
</html>
verify.html page
!DOCTYPE html>
<html>
<head>
<title>sign up from</title>
<link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<style type="text/css">
body{
background-image: url("1.jpeg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#sm{
width: 20rem;
}
.inp{
width: 50px;
height: 50px;
border-radius: 5px;
outline: none;
text-align: center;
}
#mtok{
margin-top: 60px!important;
}
#kon{
width: 70px;
background-color: tomato;
border-radius: 0px 1px 60px 0px;
height: 80px;
}
#im{
border-radius: 50px;
}
#kons{
width: 70px;
background-color: tomato;
border-radius: 60px 0px 1px 0px;
height: 80px;
float: right;
}
</style>
</head>
<body>
<div id="kon">
</div>
<div class="container">
<center>
<div class="mt-2" id="mtok">
<img src="2.png" width="80px" id="im"><br> <br>
<input type="text" name="" class="inp" id="one">
<input type="text" name="" class="inp" id="two">
<input type="text" name="" class="inp" id="three">
<input type="text" name="" class="inp" id="four">
<input type="text" name="" class="inp" id="five"><br><br>
<input type="submit" name="sub" id="sub" value="ok" class="btn btn-info p-2 font-weight-bold text-white">
</div>
</center>
</div>
<script type="text/javascript">
let match = Math.floor(Math.random() * 101010) ;
window.addEventListener("load",function(){
const params = (new URL(document.location)).searchParams;
console.log(params);
var email =params.get("email");
console.log(email);
Email.send({
Host : "smtp.gmail.com",
Username : "fiveerjoy@gmail.com",
Password : "write your password here",
To : email,
From : 'test@gmail.com',
Subject : "verifaction code",
Body : match
});
});
document.getElementById('sub').addEventListener("click",function(){
const params = (new URL(document.location)).searchParams;
console.log(params);
var name =params.get("name");
var email =params.get("email");
var pass =params.get("pass");
var conpass =params.get("conpass");
const one = document.getElementById('one').value;
const two =document.getElementById('two').value;
const three =document.getElementById('three').value;
const four =document.getElementById('four').value;
const five =document.getElementById('five').value;
let newMatch = one+two+three+four+five;
if (newMatch==match) {
swal({
title: "GOOD!",
text: "your mail is verified !",
icon: "success", //note you can write here error or warning or info
button: "ok",
});
}else{
swal({
title: "something worng!",
text: "please enter valid code !",
icon: "warning", //note you can write here error or warning or info
button: "ok",
});
}
console.log(newMatch);
console.log(name);
console.log(email);
console.log(pass);
console.log(conpass);
});
console.log(match);
</script>
</body>
</html>
thank you
No comments