AngularJS Validex - валидация текстового поля
-
2025
-
4

Недавно разработал плагин для jQuery, предназначенный для валидация вводимых данных в текстовые поля. Принцип работы основан на регулярных выражениях. Вы задаете определенный паттерн (regular expression pattern) и плагин будет проверять по этому паттерну ваше текстовое поле. Если введенное значение не соответствует условиям паттерна, к полю присваивается класс .error
. При положительном условии, этот класс удаляется.
Последнее время, я решил усердно взяться за AngularJS. И в качестве практики, решил написать директиву для выполнения той же задачи, что делает мой плагин на jQuery.
app.directive('validex', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (val) {
if (!attrs.validex) return false;
var pattern = attrs.validex;
var flags = attrs.vflags ? attrs.vflags : '';
var exp = new RegExp(pattern,flags);
switch (pattern) {
case 'email':
exp = /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm;
break;
case 'url':
exp = /https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i;
break;
case 'phone':
exp = /^\+?[2-9]\d{2}[0-9]\d{3}\d{4}$/;
break;
case 'tw-username':
exp = /^@([A-Za-z0-9_]{3,15})$/;
break;
case 'card':
exp = /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$/;
break;
case 'hex':
exp = /\#([a-fA-F]|[0-9]){3, 6}/;
break;
default:
exp = new RegExp(pattern,flags);
break;
}
if (val.match(exp))
{
element.removeClass('error');
scope.status = 'ok';
}
else {
element.addClass('error');
scope.status = 'error!';
}
});
}
};
});
Только в данном случае, я решил добавить еще несколько полезных паттернов. Имеется две возможности использовать эту директиву. Указав свойству validex
определенный патерн или использовать готовые паттерны.
<input ng-model="inp" data-validex="^@([A-Za-z0-9_]{3,15})$" type="text">
OR
<input ng-model="inp" data-validex="tw-username" type="text">
# data-validex
- email - проверка E-Mail адреса (пример: zzz@xxx.yyy)
- url - проверка URL адреса (пример: http://myadress.domen)
- phone - проверка телефонного номера (пример: + или 79998887766)
- card - проверка номера банковской карты (пример: 1111222233334444)
- hex - проверка HEX (пример: #FF0000)
- tw-username - проверка Twitter логина (пример: @username)
ПОДПИШИСЬ НА ОБНОВЛЕНИЯ
Только новые публикации и никакого мусора.