Xin chào mọi người,
Trong quá trình bảo mật thông tin trực tuyến, việc sử dụng mật khẩu mạnh là
rất quan trọng. Để giúp người dùng tạo ra các mật khẩu mạnh và an toàn hơn,
"Password Strength Checker" ra đời - một công cụ đơn giản nhưng hữu ích để
kiểm tra sức mạnh của mật khẩu. Chúng ta có thể dễ dàng thực hiện công cụ
này bằng việc sử dụng HTML, CSS và JavaScript.
Thông qua việc kết hợp các ngôn ngữ này, chúng ta có thể tạo ra một giao
diện đơn giản cho người dùng nhập mật khẩu và nhận phản hồi về mức độ mạnh
yếu của mật khẩu mà họ nhập. Như vậy, chúng ta giúp họ tự đánh giá và cải
thiện tính bảo mật của tài khoản cá nhân.
Dưới đây là một ví dụ về cách tạo "Password Strength Checker" sử dụng HTML
để xây dựng giao diện, CSS để tạo kiểu và động hoạt, và JavaScript để phân
tích mật khẩu và đánh giá mức độ mạnh yếu. Hãy cùng nhau khám phá cách thực
hiện công cụ hữu ích này và tạo ra môi trường trực tuyến an toàn hơn cho
người dùng!
Các bài viết liên quan:
Tạo Hiệu Ứng Trái Tim Đầy Màu Sắc Khi Di Chuột bằng HTML, CSS
và Javascript
Cách làm Video Slider đơn giản bằng HTML, CSS và
Javascript
Input Validator đơn giản bằng HTML, CSS và Javascript
Animated Login Form đơn giản bằng HTML và CSS
Sticky Header On Scroll đơn giản bằng HTML, CSS và
Javascript
Bước 1: Thêm HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Password Strength Checker</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Password Strength Checker</h2>
<div class="inputBox">
<input type="password" placeholder="password" id="password" />
<div class="show"></div>
</div>
<div class="message"></div>
<div class="strengthLine"></div>
</div>
</body>
<script src="./main.js"></script>
</html>
Bước 2: Thêm CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
}
.container {
position: relative;
width: 400px;
padding: 30px;
background-color: #333;
display: flex;
justify-content: center;
flex-direction: column;
border: 1px solid #111;
gap: 10px;
padding-bottom: 70px;
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #0005);
}
.container h2 {
color: #666;
font-weight: 500;
}
.container .inputBox {
position: relative;
width: 100%;
}
.container .inputBox input {
position: relative;
width: 100%;
background-color: #222;
border: none;
outline: none;
padding: 10px;
color: #fff;
font-size: 16px;
}
.container .strengthLine {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
font-size: 12px;
background-color: #222;
}
.container .message {
position: absolute;
bottom: 30px;
left: 30px;
width: fit-content;
height: 30px;
font-size: 12px;
color: rgb(169, 35, 35);
transition: all 0.3s;
}
.container .strengthLine::before {
content: '';
position: absolute;
width: 0%;
height: 100%;
transition: all 0.3s;
}
.container.weak .strengthLine::before {
width: 10%;
background-color: #f00;
}
.container.medium .strengthLine::before {
width: 30%;
background-color: rgb(255, 196, 0);
}
.container.strong .strengthLine::before {
width: 70%;
background-color: rgb(89, 255, 0);
}
.container.very-strong .strengthLine::before {
width: 100%;
background-color: rgb(12, 117, 0);
}
.container .strengthLine::after {
content: '';
position: absolute;
bottom: 18px;
left: 30px;
transition: all 0.5s;
}
.container.weak .strengthLine::after {
content: 'Your password is weak.';
color: rgb(169, 35, 35);
font-size: 12px;
}
.container.medium .strengthLine::after {
content: 'Your password is medium.';
color: rgb(255, 196, 0);
font-size: 12px;
}
.container.strong .strengthLine::after {
content: 'Your password is strong.';
color: rgb(89, 255, 0);
font-size: 12px;
}
.container.very-strong .strengthLine::after {
content: 'Your password is very strong.';
color: rgb(12, 117, 0);
font-size: 12px;
}
.show {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 100%;
background-color: #333;
border: 6px solid #222;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.show::before {
content: 'Show';
font-size: 8px;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
}
.show.hide::before {
content: 'Hide';
}
/* UI bên dưới phần mô tả */
Bước 3: Thêm Javascript
const password = document.querySelector("#password");
const showBtn = document.querySelector(".show");
showBtn.onclick = () => {
if (password.type === "password") {
password.setAttribute("type", "text");
showBtn.classList.add("hide");
} else {
password.setAttribute("type", "password");
showBtn.classList.remove("hide");
}
};
function handlePassword(password) {
const hasLowerCase = /[a-z]/.test(password);
const hasUpperCase = /[A-Z]/.test(password);
const hasDigit = /[0-9]/.test(password);
const hasSpecialChar = /[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]/.test(password);
const isValidLength = password.length >= 8 && password.length <= 20;
let strength = 0;
if (hasLowerCase) strength++;
if (hasUpperCase) strength++;
if (hasDigit) strength++;
if (hasSpecialChar) strength++;
return {
strength: strength,
validLength: isValidLength,
};
}
const container = document.querySelector(".container");
const message = document.querySelector(".message");
password.addEventListener("keyup", (e) => {
let value = handlePassword(e.target.value);
if (value.validLength) {
container.classList.add("valid");
message.innerHTML = "";
} else if (!value.validLength && e.target.value === "") {
container.classList.remove("valid");
message.innerHTML = "";
} else {
message.innerHTML = "Password must be at least 8 and less than 20.";
}
switch (value.strength) {
case 1:
container.classList.add("weak");
container.classList.remove("medium");
container.classList.remove("strong");
container.classList.remove("very-strong");
break;
case 2:
container.classList.remove("weak");
container.classList.add("medium");
container.classList.remove("strong");
container.classList.remove("very-strong");
break;
case 3:
container.classList.remove("weak");
container.classList.remove("medium");
container.classList.add("strong");
container.classList.remove("very-strong");
break;
case 4:
container.classList.remove("weak");
container.classList.remove("medium");
container.classList.remove("strong");
container.classList.add("very-strong");
break;
default:
container.classList.remove("weak");
container.classList.remove("medium");
container.classList.remove("strong");
container.classList.remove("very-strong");
break;
}
});
Full tutorial:
Hoàn thành
Tóm lại, "Password Strength Checker" không chỉ là một công cụ hữu ích để tăng cường tính bảo mật trực tuyến mà còn là một ví dụ minh chứng cho khả năng kết hợp giữa HTML, CSS và JavaScript trong việc tạo ra các ứng dụng đơn giản và hữu ích trên web. Bằng cách áp dụng kiến thức từ bài viết này, bạn có thể tạo ra các công cụ hỗ trợ người dùng trong việc duy trì tính bảo mật cá nhân.
Hãy tận dụng kiến thức này để phát triển những ứng dụng tương tự và đóng góp vào việc tạo nên một môi trường trực tuyến an toàn và bảo mật hơn cho mọi người. Chúc bạn thành công trong việc ứng dụng các khái niệm và kỹ thuật này vào các dự án web của bạn!