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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book