Password Strength validation using JavaScript in AngularJS

Last Reply 4 months ago By dharmendr

Posted 4 months ago

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

Password Strength validation example using JavaScript and jQuery

Posted 4 months 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