Password Strength validation using JavaScript in AngularJS

rani
 
on Jul 12, 2019 12:24 AM
Sample_131552.zip
1489 Views

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

Password Strength validation example using JavaScript and jQuery

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Jul 12, 2019 04:12 AM

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