Password Strength validation using JavaScript in AngularJS

Last Reply one month ago By dharmendr

Posted one month ago

How to do Password Strength validation in angularjs like in the below code.

Password Strength validation example using JavaScript and jQuery

You are viewing reply posted by: dharmendr one month ago.
Posted one month ago

Hi rani,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', []);
        app.controller('MyController', function ($scope) {
            $scope.Validate = function () {
                var password = $scope.Password;

                //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;
                for (var i = 0; i < regex.length; i++) {
                    if (new RegExp(regex[i]).test(password)) {
                        passed++;
                    }
                }

                if (passed > 2 && password.length > 8) {
                    passed++;
                }

                switch (passed) {
                    case 0:
                    case 1:
                        $scope.Style = { "height": "10px", "background-color": "red" };
                        break;
                    case 2:
                        $scope.Style = { "height": "10px", "background-color": "darkorange" };
                        break;
                    case 3:
                    case 4:
                        $scope.Style = { "height": "10px", "background-color": "green" };
                        break;
                    case 5:
                        $scope.Style = { "height": "10px", "background-color": "darkgreen" };
                        break;
                }
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <input type="password" name="Password" ng-model="Password" ng-keyup="Validate()" />
        <br /><div ng-style="Style" ng-show="Password"></div>
    </div>
</body>
</html>

Demo