Cách Tạo Password Strength Checker JavaScript

Cách Tạo Password Strength Checker JavaScript


Ngày 2 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 check password strength check bằng javascript cho thiết kế và phát triển website nha.

Password Strength Checker JavaScript

HTML

Đầu tiên chúng ta sẽ đi vào tạo cấu trúc cho chức năng Javascript Password Regex Validation thông qua các thẻ HTML ở đoạn code dưới đây nha:

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <title>Password Strength Checker JavaScript</title>
   </head>
   <body>
      <div class="container">
         <header>Kiểm Tra Độ Bảo Mật Của Mật Khẩu</header>
         <form action="#">
            <div class="field">
               <input onkeyup="trigger()" type="password" placeholder="Hãy Nhập Mật Khẩu">
               <span class="showBtn">Hiển</span>
            </div>
            <div class="indicator">
               <span class="yeu"></span>
               <span class="binh-thuong"></span>
               <span class="manh"></span>
            </div>
            <div class="text"></div>
         </form>
      </div>
   </body>
</html>

CSS

Tiếp theo chúng ta sẽ dùng các thuộc tính CSS cơ bản để phát triển giao diện cho chức năng này thông qua đoạn code sau đây nha:

@import url('https://fonts.googleapis.com/css?
family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  text-align: center;
 background: linear-gradient(to right, #a1ffce, #faffd1);
  }
.container{
  background: #fff;
  padding: 20px 30px;
  width: 420px;
  border-radius: 5px;
 box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.container header{
  font-size: 24px;
  font-weight: 600;
  line-height: 33px;
}
.container form{
  margin: 20px 5px 10px 5px;
  position: relative;
}
.container form .field{
  height: 45px;
  width: 100%;
  display: flex;
  position: relative;
}
form .field input{
  width: 100%;
  height: 100%;
  border: 1px solid lightgrey;
  padding-left: 15px;
  outline: none;
  border-radius: 5px;
  font-size: 17px;
  transition: all 0.3s;
}
form .field input:focus{
  border-color: #27ae60;
  box-shadow: inset 0 0 3px #2fd072;
}
form .field .showBtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: none;
  user-select: none;
}
form .indicator{
  height: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  display: none;
}
form .indicator span{
  position: relative;
  height: 100%;
  width: 100%;
  background: lightgrey;
  border-radius: 5px;
}
form .indicator span:nth-child(2){
  margin: 0 3px;
}
form .indicator span.active:before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 5px;
}
.indicator span.yeu:before{
  background-color: #ff4757;
}
.indicator span.binh-thuong:before{
  background-color: orange;
}
.indicator span.manh:before{
  background-color: #23ad5c;
}
form .text{
  font-size: 20px;
  font-weight: 500;
  display: none;
  margin-bottom: -10px;
}
form .text.yeu{
  color: #ff4757;
}
form .text.binh-thuong{
  color: orange;
}
form .text.manh{
  color: #23ad5c;
}

Javascript

Phần cuối cùng mình sẽ sử dụng regex validation trong javascript để kiểm tra độ bảo mật cho mật khẩu khi người dùng nhập vào ô input. Để hiểu rõ hơn bạn xem đoạn code dưới đây nha:

const indicator = document.querySelector(".indicator");
const input = document.querySelector("input");
const weak = document.querySelector(".yeu");
const medium = document.querySelector(".binh-thuong");
const strong = document.querySelector(".manh");
const text = document.querySelector(".text");
const showBtn = document.querySelector(".showBtn");
let regExpWeak = /[a-z]/;
let regExpMedium = /\d+/;
let regExpStrong = /.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/;
function trigger(){
  if(input.value != ""){
    indicator.style.display = "block";
    indicator.style.display = "flex";
    if(input.value.length <= 3 && 
(input.value.match(regExpWeak) || 
input.value.match(regExpMedium) || 
input.value.match(regExpStrong)))no=1;
    if(input.value.length >= 6 && 
((input.value.match(regExpWeak) && 
input.value.match(regExpMedium)) || 
(input.value.match(regExpMedium) && 
input.value.match(regExpStrong)) || (input.value.match(regExpWeak) && 
 input.value.match(regExpStrong))))no=2;
    if(input.value.length >= 6 && 
input.value.match(regExpWeak) && 
input.value.match(regExpMedium) && input.value.match(regExpStrong))no=3;
    if(no==1){
      weak.classList.add("active");
      text.style.display = "block";
      text.textContent = "Mật Khẩu Bạn Yếu";
      text.classList.add("weak");
    }
    if(no==2){
      medium.classList.add("active");
      text.textContent = "Mật Khẩu Bạn Bình Thường";
      text.classList.add("medium");
    }else{
      medium.classList.remove("active");
      text.classList.remove("medium");
    }
    if(no==3){
      weak.classList.add("active");
      medium.classList.add("active");
      strong.classList.add("active");
      text.textContent = "Mật Khẩu Bạn  Mạnh";
      text.classList.add("strong");
    }else{
      strong.classList.remove("active");
      text.classList.remove("strong");
    }
    showBtn.style.display = "block";
    showBtn.onclick = function(){
      if(input.type == "password"){
        input.type = "text";
        showBtn.textContent = "Ẩn";
        showBtn.style.color = "#23ad5c";
      }else{
        input.type = "password";
        showBtn.textContent = "Hiển";
        showBtn.style.color = "#000";
      }
    }
  }else{
    indicator.style.display = "none";
    text.style.display = "none";
    showBtn.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 Kiem tra do bao mat cua mat khau by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo cách tạo chức năng ẩn và hiển thị mật khẩu thì truy cập đường dẫn bên dưới nha.
Cách Tạo Chức Năng Ẩn Và Hiển Thị Mật Khẩu

Nếu bạn muốn tham khảo các html input password thì truy cập đường dẫn bên dưới nha.
HTML Input Password

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp cho bạn cách tạo chức năng password strength checker 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ẻ!