JavaScript Password Strength Validation Example (PURE JS)

Khodzhaev Khozhiakbar — Thu, 26 Jan 2023 14:57:01 +0000

I have long been interested in how to make validators passwords, and I searched the Internet a lot of options, but could not find one which was short and clear + to be written in pure JS, I now want to share with my version of the code, may be for beginners will help.

In the past few years, I have been interested in writing my own password validator. At first, I thought it would be easy, but after some research and experimentation, I found out that there are many ways to validate passwords and each has its own advantages and disadvantages.

I did not want to use any third-party libraries or services because it would make the code harder to understand for beginners. Therefore, this article describes an implementation of a simple password validator written entirely in JavaScript without any external dependencies.

CSS

 * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        h4 {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 5px;
        }
        #block {
            width: 300px;
        }
        input {
            display: block;
            padding: 5px 10px;
            margin-bottom: 5px;
            width: 100%;
        }
        .status {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 2px;
        }
        .status div {
            padding: 5px;
        }

HTML

<div id="block">
            <h4>Parolni mukammaligi</h4>
            <input type="text" placeholder="Enter password">
            <div class="status">
                <div class="status_bar"></div>
                <div class="status_bar"></div>
                <div class="status_bar"></div>
                <div class="status_bar"></div>
            </div>
        </div>

 let input = document.querySelector('input')
        let bars = document.querySelectorAll('.status_bar')

        function check_lower_case(x) {
            for (let i of x) {
                if ("abcdefghijklmnopqrstuvwxyz".includes(i)) {
                    return 1
                }
            }
            return 0
        }

        function check_upper_case(x) {
            for (let i of x) {
                if ("ABCDEFGHIJKLMNOPQRSTUVWXYZ".includes(i)) {
                    return 1
                }
            }
            return 0
        }

        function check_digits(x) {
            for (let i of x) {
                if ("0123456789".includes(i)) {
                    return 1
                }
            }
            return 0
        }

        function check_spec_char(x) {
            for (let i of x) {
                if ("!@#$%^&*()-+".includes(i)) {
                    return 1
                }
            }
            return 0
        }


        input.addEventListener('input', ()=> {

            let point = 0

            point += check_lower_case(input.value)
            point += check_upper_case(input.value)
            point += check_digits(input.value)
            point += check_spec_char(input.value)

            if (point == 4) {
                bars[0].style.backgroundColor = 'green'
                bars[1].style.backgroundColor = 'green'
                bars[2].style.backgroundColor = 'green'
                bars[3].style.backgroundColor = 'green'
            } else if (point == 3) {
                bars[0].style.backgroundColor = 'yellow'
                bars[1].style.backgroundColor = 'yellow'
                bars[2].style.backgroundColor = 'yellow'
                bars[3].style.backgroundColor = 'transparent'
            } else if (point == 2) {
                bars[0].style.backgroundColor = 'orange'
                bars[1].style.backgroundColor = 'orange'
                bars[2].style.backgroundColor = 'transparent'
                bars[3].style.backgroundColor = 'transparent'
            } else if (point == 1) {
                bars[0].style.backgroundColor = 'red'
                bars[1].style.backgroundColor = 'transparent'
                bars[2].style.backgroundColor = 'transparent'
                bars[3].style.backgroundColor = 'transparent'
            } else {
                bars[0].style.backgroundColor = 'transparent'
                bars[1].style.backgroundColor = 'transparent'
                bars[2].style.backgroundColor = 'transparent'
                bars[3].style.backgroundColor = 'transparent'
            }
        })

DEV Community: Khodzhaev Khozhiakbar

JavaScript Password Strength Validation Example (PURE JS)