Hướng dẫn email check javascript code - kiểm tra email mã javascript

Question

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.

Nội dung chính Show

Javascript Email Validation Với Regex
Tổng kết:

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.



   
      
      Email Validation - Niềm Vui Lập Trình
      
      
   
   
      
         Email Validation  Javascript


            
            
               Xin Hãy Nhập Đúng Định Dạng Email

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ẻ!

programming javascript Email regex js Email validation regex Pattern email regex Validate email ReactJS

Hướng dẫn email check javascript code - kiểm tra email mã javascript

Javascript Email Validation Với Regex

HTML

CSS

Javascript

Tổng kết:

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội