Angular Validate Password Strength

This blog will teach you how to evaluate your password strength

Step 1

First we have to create a cshtml and js page on your project. Just refer to the below code for input textbox and input type. We have to assign a password. The password validates minimum and maximum length for textbox. Here I have assigned minimum length as 8 and maximum length as 15.

<div class="form-group"> <label for="pswd">Password</label>
  <span>
        <input class="is_required validate account_input form-control" type="password" placeholder="Enter Password" ng-model="pswd" ng-change="CheckStrngth(pswd)" name="pswd" id="pswd" ng-minlength="8" maxlength="15">
  </span>
</div>

Step 2

Please put this code in your .js page.

Here I have mentioned change event for password strength validation purposes. The event is ng-change="CheckStrngth(pswd)"

Get textbox value from ng-model="pswd" and pass change event parameter.

$scope.CheckStrngth = function(pswd) {
    //TextBox left blank.
    if (pswd == 0) {
        $("#password_strength").html("");
        return;
    }
    //Regular Expressions.
    var regex = new Array();
    regex.push("[A-Z]"); //Uppercase Alphabet.
    regex.push("[a-z]"); //Lowercase Alphabet.
    regex.push("[0-9]"); //Digit.
    regex.push("[$$!%*#?&]"); //Special Character.
    var passed = 0;
    //Validate for each Regular Expression.
    for (var i = 0; i < regex.length; i++) {
        if (new RegExp(regex[i]).test(pswd)) {
            passed++;
        }
    }
    //Validate for length of Password.
    if (passed > 2 && pswd.length > 5) {
        passed++;
    }
    //Display status.
    var color = "";
    var strength = "";
    $scope.status = false;
    if (passed == 1) {
        strength = "Weak";
        color = "red";
        $scope.status = false;
    } else if (passed == 2) {
        strength = "Average";
        color = "darkorange";
        $scope.status = false;
    } else if (passed == 3) {
        strength = "Good";
        color = "green";
        $scope.status = true;
    } else if (passed == 4) {
        strength = "Strong";
        color = "darkgreen";
        $scope.status = true;
    } else if (passed == 5) {
        strength = "Very Strong";
        color = "darkgreen";
        $scope.status = true;
    }
    $("#password_strength").html(strength);
    $("#password_strength").css("color", color);
    // $scope.status = status;
}

Step 3

Here I have to evaluate the password in four way.s The password must contain alphanumerics and special characters (Number,Capital letter,Small Letter,Symbols). I’ll check my password (strong, average, or weak).  

 

 

 

Finally I  have successfully evaluated my password strength. I hope this blog was mostly helpful for you.