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

Дата: 31.10.2016 в 21:27, Категория: AngularJS
  • 1063
  • 2
AngularJS Validex - валидация текстового поля

Недавно разработал плагин для 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)
Тэги: