Создание регулярного выражения для ng-pattern, которое ожидает цифру, и прописную букву, и специальный символ, может оказаться сложным в управлении, хотя существуют some SO ответы вокруг этого направят вас в этом направлении. Как предложил @Petr Averyanov, пользовательские валидаторы — это лучший способ пойти. Они более гибкие, простые в обслуживании и позволяют разделить различные случаи ошибок на разные сообщения для пользователя.
Ознакомьтесь с ними в разделе Пользовательская проверка в Angular. Документация по формам. Откройте этот фрагмент для демонстрации:
var app = angular.module('validationDemo', ['ngMessages']);
app.directive('strongPassword', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.containsSpecial = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/[^a-z0-9]/i.test(viewValue)) { return true; }
return false;
};
ctrl.$validators.containsDigit = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/\d/.test(viewValue)) { return true; }
return false;
};
ctrl.$validators.containsUppercase = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; }
if (/[A-Z]/.test(viewValue)) { return true; }
return false;
};
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.js"></script>
<body ng-app="validationDemo">
<form name="form" class="css-form" novalidate>
<div>
Password:
<input type="text" ng-model="password" name="password" strong-password /><br />
{{password}}
<ul ng-messages="form.password.$error" multiple="true">
<li ng-message="containsSpecial">
Your password must contain at least one non-letter, non-digit character
</li>
<li ng-message="containsDigit">
Your password must contain at least one digit
</li>
<li ng-message="containsUppercase">
Your password must contain at least one uppercase letter
</li>
</ul>
</div>
</form>
</body>
Вы начинаете с объявления директивы для своих валидаторов. Мы назовем это strongPassword.
var app = angular.module('validationDemo', []);
app.directive('strongPassword', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// Validators go here
}
};
});
Прикрепите директиву к вашему паролю input в качестве HTML-атрибута с обычным преобразованием верблюжьего регистра в тире.
<body ng-app="validationDemo">
<form name="form" class="css-form" novalidate>
<div>
Password:
<input type="text" ng-model="password" name="password" strong-password /><br />
{{password}}
</div>
</form>
</body>
Для каждой проверки, которую вы хотите добавить, установите ключ в директиве ctrl.$validators. Итак, чтобы убедиться, что пароль содержит цифру,
link: function(scope, elm, attrs, ctrl) {
ctrl.$validators.containsDigit = function(modelValue, viewValue) {
if (ctrl.$isEmpty(modelValue)) { return true; } // They haven't typed yet
if (/\d/.test(viewValue)) { return true; } // Found a digit
return false;
};
}
Затем вы получаете доступ к ошибкам на form.<element name>.$error, в данном случае form.password.$error.containsDigit. Используйте директиву ng-messages (не забудьте импортировать angular-messages.js), чтобы отобразить ошибки для вашего пользователя.
<ul ng-messages="form.password.$error" multiple="true">
<li ng-message="containsDigit">
Your password must contain at least one digit
</li>
</ul>
Значение ng-messages — это объект ошибки в форме, и каждый ng-message описывает ключ в $error со значением, которое вы хотите напечатать. Опция multiple указывает Angular отображать все сообщения одновременно; в противном случае вы получаете только один за раз.
person
Kristján
schedule
07.11.2015
