Недавно разработал плагин для jQuery, предназначенный для валидация вводимых данных в текстовые поля. Принцип работы основан на регулярных выражениях. Вы задаете определенный паттерн (regular expression pattern) и плагин будет проверять по этому паттерну ваше текстовое поле. Если введенное значение не соответствует условиям паттерна, к полю присваивается класс .error. При положительном условии, этот класс удаляется.
Последнее время, я решил усердно взяться за AngularJS. И в качестве практики, решил написать директиву для выполнения той же задачи, что делает мой плагин на jQuery.
_56app.directive('validex', function(){_56 return {_56 require: 'ngModel',_56 link: function(scope, element, attrs, modelCtrl) {_56 modelCtrl.$parsers.push(function (val) {_56 if (!attrs.validex) return false;_56 var pattern = attrs.validex;_56 var flags = attrs.vflags ? attrs.vflags : '';_56 var exp = new RegExp(pattern,flags);_56 _56 switch (pattern) {_56 _56 case 'email': _56 exp = /[A-Z0-9._%+-]+@[A-Z0-9-]+.+.[A-Z]{2,4}/igm;_56 break;_56 _56 case 'url': _56 exp = /https?:\/\/(?:[-\w]+\.)?([-\w]+)\.\w+(?:\.\w+)?\/?.*/i;_56 break;_56 _56 case 'phone': _56 exp = /^\+?[2-9]\d{2}[0-9]\d{3}\d{4}$/;_56 break;_56 _56 case 'tw-username':_56 exp = /^@([A-Za-z0-9_]{3,15})$/;_56 break;_56 _56 case 'card':_56 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})$/;_56 break;_56 _56 case 'hex':_56 exp = /\#([a-fA-F]|[0-9]){3, 6}/;_56 break;_56 _56 default:_56 exp = new RegExp(pattern,flags);_56 break;_56 _56 }_56 _56 if (val.match(exp))_56 {_56 element.removeClass('error');_56 scope.status = 'ok';_56 }_56 else {_56 element.addClass('error');_56 scope.status = 'error!';_56 }_56 _56 });_56 }_56 };_56});
Только в данном случае, я решил добавить еще несколько полезных паттернов. Имеется две возможности использовать эту директиву. Указав свойству validex определенный патерн или использовать готовые паттерны.
_10<input ng-model="inp" data-validex="^@([A-Za-z0-9_]{3,15})$" type="text">_10OR_10<input ng-model="inp" data-validex="tw-username" type="text">