Init HTML

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: 100%; 
    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]; 
};

Bạn có thể thử ngay tại đây nhé.

Chúc các bạn thành công!