0
Это приложение работает для меня, но если кто-то найдет ошибку/ошибку, пожалуйста, исправьте его.Проверка пароля с помощью пароля bar & regExp специальные символы в угловом использовании директивы
Я создал небольшое приложение для проверки пароля, используя угловую директиву js. Где пользователь может подтвердить требуемый пароль One Special & Символ капитала и одно значение num с минимальной длиной 8. Я также создал панель прочности пароля.
Благодаря
Здесь Plunkr Link мой
Вот мой HTML-файл:
<!DOCTYPE html>
<html>
<head>
<link data-require="[email protected]*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="[email protected]*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="[email protected]*" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script data-require="[email protected]*" data-semver="1.4.0-beta.3" src="https://code.angularjs.org/1.4.0-beta.3/angular.js"></script>
<script src="passwordModule.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-app="passwordModule" ng-controller="pwdCtrl" class="container">
<h2>Password Validation:</h2>
<form name="form">
<div class="form-group">
<label>Password</label>
<input type="text" name="password" id="password" ng-model="user.password" ng-model-options="{allowInvalid: true}"
pattern-validator="((?=.*\d)(?=.*[A-Z])(?=.*\W).{8,8})" class="form-control"/>
</div>
<span class="alert alert-error" ng-show="form.password.$error.passwordPattern">
Password required 1 special & capital letter, 1 numeric letter <br> Required minimum 8 letter.</span>
<div class="form-group">
<label>Password Strength</label>
<password-strength ng-model="user.password"></password-strength>
<label>Confirm Password</label>
<input class="form-control" type = "text" name = "Confpassword" ng-model="user.cnfPwd" data-equal-to="password" >
<div data-ng-show = "showmsg"> Password matched </div>
<div data-ng-show = "hidemsg"> Password not matched </div>
</div>
<button class="btn btn-primary" type="button" ng-disabled = "disabledButton"> save </button>
</form>
</div>
<script type="text/javascript">
</script>
</body>
</html>
Вот мой контроллер файла:
var pwdModule = angular.module('passwordModule', []);
//Controller
pwdModule.controller('pwdCtrl', ['$scope',
function($scope) {
// Initialise the password as hello
$scope.user = {};
$scope.showmsg = false;
$scope.disabledButton = true;
if($scope.user.password === undefined) {
$scope.showmsg = false;
}
$scope.$watch('user.cnfPwd', function(newVal, oldVal) {
if(newVal !== undefined){
$scope.hidemsg = true;
}
if(newVal === $scope.user.password && $scope.user.password !== undefined) {
$scope.showmsg = true;
$scope.disabledButton = false;
$scope.hidemsg = false;
} else {
$scope.showmsg = false;
$scope.disabledButton = true;
}
})
}
]);
// Directive: Validate a regex pattern
pwdModule.directive('patternValidator', [
function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
var patt = new RegExp(attrs.patternValidator);
var isValid = patt.test(viewValue);
ctrl.$setValidity('passwordPattern', isValid);
return viewValue;
});
}
};
}
]);
// Dircetive: Display strength bar
pwdModule.directive('passwordStrength', [
function() {
return {
require: 'ngModel',
restrict: 'E',
scope: {
password: '=ngModel'
},
link: function(scope, elem, attrs, ctrl) {
scope.$watch('password', function(newVal) {
var strength = isSatisfied(newVal && newVal.length >= 8) +
isSatisfied(newVal && /[A-z]/.test(newVal)) +
isSatisfied(newVal && /(?=.*\W)/.test(newVal)) +
isSatisfied(newVal && /\d/.test(newVal));
var style = '',
percent= 0;
switch (strength) {
case 1:
style = 'danger';
percent = 25;
break;
case 2:
style = 'warning';
percent = 50;
break;
case 3:
style = 'warning';
percent = 75;
break;
case 4:
style = 'success';
percent = 100;
break;
}
scope.style = style;
scope.percent = percent;
function isSatisfied(criteria) {
return criteria ? 1 : 0;
}
}, true);
},
template: '<div class="progress">' +
'<div class="progress-bar progress-bar-{{style}}" style="width: {{percent}}%"></div>' +
'</div>'
}
}
])
Пожалуйста, проверьте это, и если какие-либо изменения необходимо затем и на нем. Благодаря
Пожалуйста, убедитесь, что у вас нет '[Az]', но '[A-Za -z] ', и я думаю, вам нужно'^(? =. * \ W) 'вместо' (? =. * \ W) '. Если выражение * pattern-validator * привязано по умолчанию, это нормально, но я все равно буду использовать '(? =. * \ D) (? =. * [AZ]) (? =. * \ W). { 8} '. –
#stribizhev спасибо. – Abhishek
Я разместил свои наблюдения с некоторыми ссылками и пояснениями. –