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!!