Membuat Password Validasi Dengan HTML, CSS dan JavaScript
FERDI ANANDA
Agustus 30, 2023
Dipublikasikan
Agustus 27, 2023
Di dunia digital saat ini, penting untuk membuat kata sandi yang kuat dan aman sehingga sulit ditebak atau diretas. Di sinilah validasi kata sandi atau pemeriksaan kekuatan berperan. Dengan menerapkan fitur validasi kata sandi ini, pemilik situs web dapat memastikan bahwa pengguna membuat kata sandi yang kuat dan kecil kemungkinannya untuk disusupi.
Dalam postingan blog ini , Anda akan mempelajari cara melakukan Pemeriksaan Validasi Kata Sandi dalam HTML , CSS , dan JavaScript . Pemeriksaan validasi kata sandi adalah fitur yang memeriksa apakah kata sandi yang dimasukkan memenuhi persyaratan minimum. Ini dapat mencakup panjang minimal 8 karakter, setidaknya satu huruf besar, satu karakter khusus, dan banyak lagi.
Dalam postingan ini, Anda tidak hanya akan mempelajari cara melakukan pemeriksaan validasi kata sandi, namun Anda juga akan mempelajari cara menerapkan ikon mata praktis yang mengubah visibilitas kata sandi. Dengan fitur ini, pengguna dapat dengan mudah menampilkan atau menyembunyikan kata sandi saat memasukkannya.
Membuat Password Validasi Dengan HTML, CSS dan JavaScript
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Password Validation Check | FerdiChocs</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Fontawesome Link for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="pass-field">
<input type="password" placeholder="Create password">
<i class="fa-solid fa-eye"></i>
</div>
<div class="content">
<p>Password must contains</p>
<ul class="requirement-list">
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 8 characters length</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 number (0...9)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 lowercase letter (a...z)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 special symbol (!...$)</span>
</li>
<li>
<i class="fa-solid fa-circle"></i>
<span>At least 1 uppercase letter (A...Z)</span>
</li>
</ul>
</div>
</div>
</body>
</html>/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #4285F4;
}
.wrapper {
width: 450px;
overflow: hidden;
padding: 28px;
border-radius: 8px;
background: #fff;
box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}
.wrapper .pass-field {
height: 65px;
width: 100%;
position: relative;
}
.pass-field input {
width: 100%;
height: 100%;
outline: none;
padding: 0 17px;
font-size: 1.3rem;
border-radius: 5px;
border: 1px solid #999;
}
.pass-field input:focus {
padding: 0 16px;
border: 2px solid #4285F4;
}
.pass-field i {
right: 18px;
top: 50%;
font-size: 1.2rem;
color: #999;
cursor: pointer;
position: absolute;
transform: translateY(-50%);
}
.wrapper .content {
margin: 20px 0 10px;
}
.content p {
color: #333;
font-size: 1.3rem;
}
.content .requirement-list {
margin-top: 20px;
}
.requirement-list li {
font-size: 1.3rem;
list-style: none;
display: flex;
align-items: center;
margin-bottom: 15px;
}
.requirement-list li i {
width: 20px;
color: #aaa;
font-size: 0.6rem;
}
.requirement-list li.valid i {
font-size: 1.2rem;
color: #4285F4;
}
.requirement-list li span {
margin-left: 12px;
color: #333;
}
.requirement-list li.valid span {
color: #999;
}
@media screen and (max-width: 500px) {
body, .wrapper {
padding: 15px;
}
.wrapper .pass-field {
height: 55px;
}
.pass-field input, .content p {
font-size: 1.15rem;
}
.pass-field i, .requirement-list li {
font-size: 1.1rem;
}
.requirement-list li span {
margin-left: 7px;
}
}const passwordInput = document.querySelector(".pass-field input");
const eyeIcon = document.querySelector(".pass-field i");
const requirementList = document.querySelectorAll(".requirement-list li");
// An array of password requirements with corresponding
// regular expressions and index of the requirement list item
const requirements = [
{ regex: /.{8,}/, index: 0 }, // Minimum of 8 characters
{ regex: /[0-9]/, index: 1 }, // At least one number
{ regex: /[a-z]/, index: 2 }, // At least one lowercase letter
{ regex: /[^A-Za-z0-9]/, index: 3 }, // At least one special character
{ regex: /[A-Z]/, index: 4 }, // At least one uppercase letter
]
passwordInput.addEventListener("keyup", (e) => {
requirements.forEach(item => {
// Check if the password matches the requirement regex
const isValid = item.regex.test(e.target.value);
const requirementItem = requirementList[item.index];
// Updating class and icon of requirement item if requirement matched or not
if (isValid) {
requirementItem.classList.add("valid");
requirementItem.firstElementChild.className = "fa-solid fa-check";
} else {
requirementItem.classList.remove("valid");
requirementItem.firstElementChild.className = "fa-solid fa-circle";
}
});
});
eyeIcon.addEventListener("click", () => {
// Toggle the password input type between "password" and "text"
passwordInput.type = passwordInput.type === "password" ? "text" : "password";
// Update the eye icon class based on the password input type
eyeIcon.className = `fa-solid fa-eye${passwordInput.type === "password" ? "" : "-slash"}`;
});Dalam postingan blog ini, saya telah membahas cara menerapkan pemeriksaan validasi kata sandi menggunakan HTML, CSS, dan JavaScript. Ini termasuk membuat daftar periksa kata sandi, menambahkan elemen HTML yang diperlukan ke formulir, menata elemen menggunakan CSS, dan menambahkan kode JavaScript untuk memvalidasi kata sandi dan mengubah visibilitas kata sandi.
Dengan mengikuti panduan langkah demi langkah dan kode yang diberikan, Anda seharusnya dapat dengan mudah menambahkan fitur-fitur ini ke formulir login atau pendaftaran Anda sesuai kebutuhan.
Selain itu, saya telah membahas konsep pengembangan web seperti manipulasi DOM, penanganan event, objek, gaya CSS, dan banyak lagi. Dengan memahami konsep-konsep ini, Anda tidak hanya dapat membuat pemeriksaan validasi kata sandi tetapi juga menerapkannya pada proyek pengembangan web lainnya .
Jika Anda mengalami masalah atau kode Anda tidak berfungsi sebagaimana mestinya, Anda dapat mengunduh file kode sumber untuk validasi kata sandi ini secara gratis. Klik tombol unduh untuk mendapatkan file zip yang berisi folder proyek dengan file kode sumber.