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.