All of us have seen , for choosing a password we need combination of special characters, Capital letter , small letters, digits etc to make it strong.
Here is the code snippets to achieve this.
- <!DOCTYPE html>
- <html>
- <head>
- <title>Strong Password for Angular UI Pages</title>
-
- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
- <script>
- var app = angular.module("myApp", []);
- app.controller("myCtrl", 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";
- $scope.userPasswordstrength = 'You have a Very Strong Password now';
- } else if (mediumRegularExp.test(value)) {
- $scope.checkpwdStrength["background-color"] = "orange";
- $scope.userPasswordstrength = 'Strong password, Please give a very strong password';
- } else {
- $scope.checkpwdStrength["background-color"] = "red";
- $scope.userPasswordstrength = 'Weak Password , Please give a strong password';
- }
- };
-
- });
- </script>
- </head>
- <body ng-app="myApp">
- <div ng-controller="myCtrl" style="border:5px solid gray; width:800px;">
- <div>
- <h3>Strong Password for Angular UI Pages </h3>
- </div>
- <div style="padding-left:25px;">
- <div ng-style="checkpwdStrength"></div>
- <input type="password" ng-model="userPassword" ng-change="validationInputPwdText(userPassword)" class="class1" />
- <b> {{userPasswordstrength}}</b>
- </div>
- <br />
- <br />
- <br />
- </div>
- </body>
- </html>