Cám ơn bạn đã ghé thăm và quan tâm đến những dự án của chúng ta. Trong bài viết này, chúng ta sẽ tìm hiểu cách thực hiện Xác thực Địa chỉ Email bằng sử dụng HTML, CSS và JavaScript. Blog này cung cấp nhiều ví dụ về xác thực, bao gồm xác thực Email, mật khẩu, và xác nhận mật khẩu.
Trong ngữ cảnh của chúng ta, Xác thực Email đề cập đến việc kiểm tra tính hợp lệ của địa chỉ email mà người dùng cung cấp. Thường thấy trên các ứng dụng web, có các biểu mẫu đăng nhập hoặc đăng ký yêu cầu người dùng cung cấp địa chỉ email và mật khẩu để tạo tài khoản. Để đảm bảo tính chính xác và an toàn, việc kiểm tra email là cần thiết.
Bây giờ, chúng ta hãy nhìn vào hình ảnh của dự án “Cách xác thực địa chỉ email” của chúng ta. Trong hình ảnh, có ba trường nhập văn bản cùng với biểu tượng đi kèm. Trong trường nhập email thứ nhất, chúng ta thấy nó đang trống. Trong trường nhập email thứ hai, một địa chỉ email không hợp lệ được hiển thị, do đó biểu tượng có màu đỏ. Còn trong trường nhập email thứ ba, một địa chỉ email hợp lệ được hiển thị, dẫn đến một biểu tượng màu xanh lá cây và dấu kiểm. Các biểu tượng màu này sẽ tự động xuất hiện khi bạn nhập địa chỉ email.
Cách xác thực email trong HTML CSS & JavaScript . Trình kiểm tra email
Tôi đã cung cấp tất cả mã HTML CSS và JavaScript mà tôi đã sử dụng để tạo Trình kiểm tra Email này. Trước khi đi vào tệp mã nguồn, tôi muốn giải thích ngắn gọn về video hướng dẫn xác thực email.
Như bạn đã thấy trong video hướng dẫn về Trình xác minh Email. Lúc đầu, có một trường email đầu vào trống với biểu tượng màu xám, khi tôi bắt đầu nhập email, biểu tượng chuyển sang màu đỏ và khi tôi hoàn thành địa chỉ email của mình bằng một địa chỉ email hợp lệ, biểu tượng có màu chuyển sang màu xanh lục kèm theo một dấu kiểm biểu tượng. Nếu bạn đang ở trong thị trường cho clothes, nền tảng của chúng tôi là sự lựa chọn tốt nhất của bạn! Trung tâm mua sắm lớn nhất!
Để thiết kế giao diện người dùng của trường nhập, tôi chỉ sử dụng HTML và CSS để xác thực địa chỉ email và thay đổi màu của biểu tượng và biểu tượng, tôi đã sử dụng một số Mã JavaScript và để xác thực địa chỉ email, tôi đã sử dụng một số mẫu biểu thức chính quy .
Bạn cũng có thể copy mã nguồn dưới đây như demo tôi đang hướng dẫn.
Để lấy mã HTML và CSS sau đây cho Trình kiểm tra Email, bạn cần tạo hai tệp, một tệp là tệp HTML và tệp kia là tệp CSS. Sau khi tạo hai tệp này, bạn có thể sao chép-dán các mã đã cho vào tài liệu của mình. Bạn cũng có thể tải xuống tất cả các tệp mã nguồn từ nút tải xuống đã cho.
Code HTML&CSS
<!DOCTYPE html>
<!-- Coding By CodingDung - CodingDung.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Email Vaidation</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css" />
<!-- Unicons CSS -->
<link
rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
/>
</head>
<body>
<div class="input-field">
<input type="email" placeholder="Enter your email" spellcheck="false"/>
<i class="uil uil-envelope email-icon"></i>
</div>
<!-- JavaScript -->
<script>
const input = document.querySelector("input"),
emailIcon = document.querySelector(".email-icon")
input.addEventListener("keyup", () =>{
let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if(input.value === ""){
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
return emailIcon.style.color = "#b4b4b4";
}
if(input.value.match(pattern)){
emailIcon.classList.replace("uil-envelope", "uil-check-circle");
return emailIcon.style.color = "#4bb543"
}
emailIcon.classList.replace("uil-check-circle", "uil-envelope");
emailIcon.style.color = "#de0611"
})
</script>
</body>
</html>
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e3f2fd;
}
.input-field {
position: relative;
height: 50px;
width: 280px;
border-radius: 6px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.input-field input {
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 6px;
padding: 0 15px;
font-size: 15px;
font-weight: 400;
color: #333;
}
input::placeholder {
color: #b4b4b4;
}
.input-field .email-icon {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: #b4b4b4;
}
Nếu như bạn muốn thử nghiệm luôn với code của chúng tôi bạn cũng có thể trực tiếp download tài liệu từ link bên dưới.
Cảm ơn các bạn, hãy để lại comment nếu bạn có thắc mắc và đừng quên 1 like và share giúp chúng tôi có thêm động lực nhé.!
Nếu có điều gì thắc mắc các bạn cứ để lại comment nhé. Xin cảm ơn!