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.

<div class="form-group"> <label for="pswd">Password</label>
<span>
<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">
</span>
</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.

$scope.CheckStrngth = function(pswd) {
//TextBox left blank.
if (pswd == 0) {
$("#password_strength").html("");
return;
}
//Regular Expressions.
var regex = new Array();
regex.push("[A-Z]"); //Uppercase Alphabet.
regex.push("[a-z]"); //Lowercase Alphabet.
regex.push("[0-9]"); //Digit.
regex.push("[$$!%*#?&]"); //Special Character.
var passed = 0;
//Validate for each Regular Expression.
for (var i = 0; i < regex.length; i++) {
if (new RegExp(regex[i]).test(pswd)) {
passed++;
}
}
//Validate for length of Password.
if (passed > 2 && pswd.length > 5) {
passed++;
}
//Display status.
var color = "";
var strength = "";
$scope.status = false;
if (passed == 1) {
strength = "Weak";
color = "red";
$scope.status = false;
} else if (passed == 2) {
strength = "Average";
color = "darkorange";
$scope.status = false;
} else if (passed == 3) {
strength = "Good";
color = "green";
$scope.status = true;
} else if (passed == 4) {
strength = "Strong";
color = "darkgreen";
$scope.status = true;
} else if (passed == 5) {
strength = "Very Strong";
color = "darkgreen";
$scope.status = true;
}
$("#password_strength").html(strength);
$("#password_strength").css("color", color);
// $scope.status = status;
}

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.

4 Comments

Join the conversation! Your thoughts help the community grow.

Hamid Khan9y ago
Great....................................
- Satheesh Elumalai9y ago
  Thank u..........................................................
Satyaprakash Samantaray9y ago
Nice................................................
- Satheesh Elumalai9y ago
  Thank you....................................................................