Cách Tạo Javascript Email Validation

Cách Tạo Javascript Email Validation


Ngày 3 Tháng 11 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo email validation javascript cho thiết kế và phát triển website nha.

Javascript Email Validation Với Regex

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng input type email validation javascript thông qua các thẻ HTML. Ở đây mình sẽ sử dụng sự kiện onkeyup để mỗi khi người dùng nhập email vào ô input thì đều gọi hàm check trong Javascript để validate email. Để hiểu rõ hơn bạn xem đoạn code dưới đây nha.

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <title>Email Validation - Niềm Vui Lập Trình</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <div class="content">
         <header>Email Validation  Javascript</header>
         <form action="#">
            <div class="field">
               <input onkeyup="check()" id="email" type="text" autocomplete="off" placeholder="Hãy Nhập Địa Chỉ Email Của Bạn">
               <div class="icons">
                  <span class="iconError fas fa-exclamation"></span>
                  <span class="iconSuccess fas fa-check"></span>
               </div>
            </div>
            <div class="error-text">
               Xin Hãy Nhập Đúng Định Dạng Email
            </div>
            <button>Submit</button>
         </form>
      </div>
   </body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để giúp Form Email trông bắt mắt hơn thông qua đoạn code sau đây nha:

*{
  margin: 0;
  padding: 0;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #00FFFF;
}
.content{
  max-width: 400px;
  padding: 20px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
}
.content header{
  padding-top: 5px;
  font-size: 27px;
  font-weight: 600;
  line-height: 33px;
}
.content form{v   margin: 20px 27px;
}
.content form .field{
  width: 100%;
  height: 45px;
  display: flex;
  position: relative;
}
form .field input{
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-left: 15px;
  font-size: 18px;
  outline: none;
}
form .field .icons{
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
.field .icons span{
  height: 25px;
  width: 25px;
  border: 2px solid;
  border-radius: 50%;
  line-height: 25px;
  display: none;
}
.field .icons span.iconError{
  color: #e74c3c;
  border-color: #e74c3c;
}
.field .icons span.iconSuccess{
  color: #27ae60;
  border-color: #27ae60;
}
form .error-text{
  position: relative;
  margin: 15px 0 -5px 0;
  background: #e74c3c;
  color: #fceae8;
  font-size: 18px;
  padding: 8px;
  border-radius: 5px;
  user-select: none;
  display: none;
}
form .error-text:before{
  position: absolute;
  content: '';
  height: 15px;
  width: 15px;
  background: #e74c3c;
  right: 20px;
  top: -7px;
  transform: rotate(45deg);
}
form button{
  margin-top: 10px;
  width: 100%;
  height: 45px;
  border: none;
  outline: none;
  border-radius: 5px;
  background: #27ae60;
  color: #f2f2f2;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  display: none;
  transition: 0.3s;
}
form button:hover{
  background: #219150;
}

Javascript

Phần cuối cùng mình sẽ sử dụng lệnh regex để validate email thông qua đoạn code sau nha.

const email = document.querySelector("#email");
const iconError = document.querySelector(".iconError");
const iconSuccess = document.querySelector(".iconSuccess");
const error = document.querySelector(".error-text");
const btn = document.querySelector("button");
let regExp = /^[^ ][email protected][^ ]+\.[a-z]{2,3}$/;
function check(){
  if(email.value.match(regExp)){
    email.style.borderColor = "#27ae60";
    email.style.background = "#eafaf1";
    iconError.style.display = "none";
    iconSuccess.style.display = "block";
    error.style.display = "none";
    btn.style.display = "block";
  }else{
    email.style.borderColor = "#e74c3c";
    email.style.background = "#fceae9";
    iconError.style.display = "block";
    iconSuccess.style.display = "none";
    error.style.display = "block";
    btn.style.display = "none";
  }
  if(email.value == ""){
    email.style.borderColor = "lightgrey";
    email.style.background = "#fff";
    iconError.style.display = "none";
    iconSuccess.style.display = "none";
    error.style.display = "none";
    btn.style.display = "none";
  }
}

Và kết quả bạn xem video bên dưới đây nha.

Còn dưới đây là dự án trên Codepen nha.

See the Pen email validation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo form email validation cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!