JS password strength checker-CodePudding

Im learing RegExp for JS and I'm trying to create a script that will say that the password is either weak of will let it go through Here's the code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        
        <form id="myForm">
            <input type="password" id="pw" />
            <input type="button" id="myBtn" value="click me!" />
        </form>
        
        <div id="info"></div>

        <script src="script.js" async></script>
    </body>
</html>

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #252525;
    color: wheat;
}

input#pw {
    width: 200px;
    height: 35px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

input#myBtn {
    width: 75px;
    height: 35px;
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translateY(-50%);
}

#info {
    position: absolute;
    top: 55%;
    left: 47%;
    transform: translateY(-50%);
    text-transform: uppercase;
    font-size: 32px;
    animation: pulse 3s ease-in-out;
}

@keyframes pulse {
    0% {
        transform: scale(0.5);
    }

    25% {
        transform: scale(1);
        color: red;
    }

    75% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(0.75);
    }
}

window.onload = function(){
    var info = document.getElementById("info");
    var btn = document.getElementById("myForm").myBtn;

    btn.onclick = function(e) {
        e.preventDefault();

        var pw = document.getElementById("myForm").pw.value;
        var regExpPattern = /(?=.*[0-9]) (?=.*[a-z]) (?=.*[A-Z]).{5,}/;
        
        if (regExpPattern.test(pw))
        document.getElementById("myForm").submit();
        else
            info.innerHTML="password weak";
    };
};

So as you can see I'm trying to use RegExp to see if the password has uppercase, lower-case letter and a number. It should also make sure that you're password is at least 5 symbomls long.

Whenever you give it a try and your password is incorect it does say "password weak" but when you try to type 5 letter, one number, on uppercase and lower-case letters it doesn't do anything.

Please help, I don't know what to do :D can somebody explained it to me as well please <3

CodePudding user response：

Here's my suggestion: split your validation criteria up and then check each one individually. You can put the pattern and the corresponding issue text into an object for each validation to make it easier to tell the user what the problems were if validation failed.

let validations = [
    { pattern: /[a-z]/, issue: 'Must include lowercase letters.' },
    { pattern: /[A-Z]/, issue: 'Must include uppercase letters.' },
    { pattern: /[0-9]/, issue: 'Must include numbers.' },
    { pattern: /.{5,}/, issue: 'Must be at least 5 characters long.' }
];
let pwd = document.getElementById("myForm").pw.value;
let validationIssues = validations.filter(validation => {
    return !pwd?.match?.(validation.pattern);
}).map(validation => validation.issue);
if (validationIssues.length > 0) {
    console.log(`Your password was too weak for the following reasons: ${validationIssues.join('\n')}`);
}