AngularJS Password Strength Validation using Regular Expression in AngularJs

Password Strength Validation using Regular Expression in AngularJs

Hello everyone, I am going to share the code sample for validate the strength of Password field using the regular expressions. The regular expression is two type one is strong regular expression and other is medium regular expression as given below.


The strong regular expression

var strongRegularExp = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

The medium regular expression

var mediumRegularExp = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

If password strength is strong then display green color meter and if medium then display orange color meter other-wise red color meter.

The JavaScript code sample as given below..

var app = angular.module("StrengthValidationApp", []);
    app.controller("StrengthValidationCtrl", function($scope) {

      var strongRegularExp = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

      var mediumRegularExp = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

      $scope.checkpwdStrength = {
        "width": "150px",
        "height": "25px",
        "float": "right"
      };

      $scope.validationInputPwdText = function(value) {
        if (strongRegularExp.test(value)) {
          $scope.checkpwdStrength["background-color"] = "green";
        } else if (mediumRegularExp.test(value)) {
          $scope.checkpwdStrength["background-color"] = "orange";
        } else {
          $scope.checkpwdStrength["background-color"] = "red";
        }
      };

    });

The HTML code sample as given below..

<div ng-app="StrengthValidationApp">
    <div ng-controller="StrengthValidationCtrl">
        <div>
            <h3>Check password strength using RegEx!</h3>
        </div>
        <div>
            <div ng-style="checkpwdStrength"></div>
            <input type="password" ng-model="userPassword" ng-change="validationInputPwdText(userPassword)" class="class1" />
        </div>
    </div>
</div>

The Full HTML and JavaScript code sample as given below..

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script>
    var app = angular.module("StrengthValidationApp", []);
    app.controller("StrengthValidationCtrl", function($scope) {

      var strongRegularExp = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");

      var mediumRegularExp = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

      $scope.checkpwdStrength = {
        "width": "150px",
        "height": "25px",
        "float": "right"
      };

      $scope.validationInputPwdText = function(value) {
        if (strongRegularExp.test(value)) {
          $scope.checkpwdStrength["background-color"] = "green";
        } else if (mediumRegularExp.test(value)) {
          $scope.checkpwdStrength["background-color"] = "orange";
        } else {
          $scope.checkpwdStrength["background-color"] = "red";
        }
      };

    });
    </script>
</head>
<body ng-app="StrengthValidationApp">
    <div ng-controller="StrengthValidationCtrl">
        <div>
            <h3>Check password strength using RegEx!</h3>
        </div>
        <div>
            <div ng-style="checkpwdStrength"></div>
            <input type="password" ng-model="userPassword" ng-change="validationInputPwdText(userPassword)" class="class1" />
        </div>
    </div>
</body>
</html>


I hope you enjoyed this code sample. Please send me feedback for the same. Thank you!!


ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^