Kiểm tra độ mạnh yếu của mật khẩu với JavaScript

20/07/2024 0 24 2 phút đọc Demo

Nếu bạn muốn kiểm tra độ mạnh yếu của mật khẩu khi người dùng nhập, bài viết này sẽ giúp bạn.

Kiểm tra độ mạnh yếu của mật khẩu với JavaScript

Mục lục

HTML
CSS
JavaScript

Bài viết này mình sử dụng Bootstrap làm CSS Framework, các bạn có thể tự điều chỉnh nhé.

HTML

Bạn thêm thanh kiểm tra sức mạnh như sau.

<div class="form-group">
    <label>Mật khẩu</label>
    <input type="password" class="form-control" id="password" placeholder="Nhập mật khẩu">
    <div class="help-block power-container">
        <div id="power-point"></div>
    </div>
</div>

CSS

CSS của thanh kiểm tra sức mạnh của mật khẩu.

.power-container { 
    background-color: #2E424D; 
    width: 100%; 
    height: 15px; 
    border-radius: 5px; 
}
.power-container #power-point { 
    background-color: #D73F40; 
    width: 1%; 
    height: 15px; 
    border-radius: 5px; 
    transition: 0.5s; 
}

JavaScript

Ví dụ kiểm tra sức mạnh của mật khẩu với các tiêu chí sau:

Độ dài trên 6 kí tự
Có chữ số
Có chữ cái viết hoa
Có kí tự đặc biệt

var password = document.getElementById("password");
var power = document.getElementById("power-point");
password.oninput = function () {
    var point = 0;
    var value = password.value;
    var widthPower = ["1%", "25%", "50%", "75%", "100%"];
    var colorPower = ["#D73F40", "#DC6551", "#F2B84F", "#BDE952", "#3ba62f"];

    if (value.length >= 6) {
        var arrayTest = [/[0-9]/, /[a-z]/, /[A-Z]/, /[^0-9a-zA-Z]/];
        arrayTest.forEach((item) => {
            if (item.test(value)) {
                point++;
            }
        });
    }

    power.style.width = widthPower[point]; 
    power.style.backgroundColor = colorPower[point]; 
};