Angular password Validation
An example of setting stuff invalid
HTML
<form name="test" ng-app="myApp" ng-controller="myApper" class="css-form">
<input type="password" name="pass" id="pass" ng-model="pwd" placeholder="New Password" n8-pass-validate="pwd" required />
<pre>pass = {{pwd}}</pre>
<button type="submit" ng-disabled="test.$invalid">Send</button>
</form>
CSS
.css-form input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.css-form input.ng-valid.ng-dirty {
background-color: #78FA89;
}
JavaScript
angular.module('myApp', []).
controller('myApper', function($scope) {
$scope.pwd = 'asdf';
}).
directive('n8PassValidate', function() {
return {
restrict: 'A', // restrict to an attribute
require: 'ngModel', // must have ng-model attribute
link: function(scope, elem, attr, ctrl) {
scope.$watch(attr.ngModel, function( value ) {
if (!value) value = 'a1A!a1'; // pass if empty
var lowerAlph = !!value.match(/[a-z]/);
var upperAlph = !!value.match(/[A-Z]/);
var hasNumber = !!value.match(/[0-9]/);
var metLength = !!value.match(/.{6,}/);
var specialCh = !!value.match(/[^a-zA-Z0-9]/);
ctrl.$setValidity('lowerAlph', lowerAlph);
ctrl.$setValidity('upperAlph', upperAlph);
ctrl.$setValidity('hasNumber', hasNumber);
ctrl.$setValidity('metLength', metLength);
ctrl.$setValidity('specialCh', specialCh);
ctrl.$setValidity('passValid', lowerAlph && upperAlph && hasNumber && metLength && specialCh);
});
}
};
});