Post
Ask Question

Angular Validate Password Strength

Step 1

First we have to create a cshtml and js page on your project. Just refer to the below code for input textbox and input type. We have to assign a password. The password validates minimum and maximum length for textbox. Here I have assigned minimum length as 8 and maximum length as 15.

  1. <div class="form-group"> <label for="pswd">Password</label>   
  2.   <span>  
  3.         <input class="is_required validate account_input form-control" type="password" placeholder="Enter Password" ng-model="pswd" ng-change="CheckStrngth(pswd)" name="pswd" id="pswd" ng-minlength="8" maxlength="15">  
  4.   </span>   
  5. </div>  

Step 2

Please put this code in your .js page.

Here I have mentioned change event for password strength validation purposes. The event is ng-change="CheckStrngth(pswd)"

Get textbox value from ng-model="pswd" and pass change event parameter.

  1. $scope.CheckStrngth = function(pswd) {  
  2.     //TextBox left blank.  
  3.     if (pswd == 0) {  
  4.         $("#password_strength").html("");  
  5.         return;  
  6.     }  
  7.     //Regular Expressions.  
  8.     var regex = new Array();  
  9.     regex.push("[A-Z]"); //Uppercase Alphabet.  
  10.     regex.push("[a-z]"); //Lowercase Alphabet.  
  11.     regex.push("[0-9]"); //Digit.  
  12.     regex.push("[$$!%*#?&]"); //Special Character.  
  13.     var passed = 0;  
  14.     //Validate for each Regular Expression.  
  15.     for (var i = 0; i < regex.length; i++) {  
  16.         if (new RegExp(regex[i]).test(pswd)) {  
  17.             passed++;  
  18.         }  
  19.     }  
  20.     //Validate for length of Password.  
  21.     if (passed > 2 && pswd.length > 5) {  
  22.         passed++;  
  23.     }  
  24.     //Display status.  
  25.     var color = "";  
  26.     var strength = "";  
  27.     $scope.status = false;  
  28.     if (passed == 1) {  
  29.         strength = "Weak";  
  30.         color = "red";  
  31.         $scope.status = false;  
  32.     } else if (passed == 2) {  
  33.         strength = "Average";  
  34.         color = "darkorange";  
  35.         $scope.status = false;  
  36.     } else if (passed == 3) {  
  37.         strength = "Good";  
  38.         color = "green";  
  39.         $scope.status = true;  
  40.     } else if (passed == 4) {  
  41.         strength = "Strong";  
  42.         color = "darkgreen";  
  43.         $scope.status = true;  
  44.     } else if (passed == 5) {  
  45.         strength = "Very Strong";  
  46.         color = "darkgreen";  
  47.         $scope.status = true;  
  48.     }  
  49.     $("#password_strength").html(strength);  
  50.     $("#password_strength").css("color", color);  
  51.     // $scope.status = status;  
  52. }  

Step 3

Here I have to evaluate the password in four way.s The password must contain alphanumerics and special characters (Number,Capital letter,Small Letter,Symbols). I’ll check my password (strong, average, or weak).  

 
 
 

Finally I  have successfully evaluated my password strength. I hope this blog was mostly helpful for you.