Проверка текстового поля AngularJs, ограничение символов с помощью выражения regex

Question

Использование угловых js здесь:

У меня есть текстовое поле, в котором я хочу применить регулярное выражение и запретить пользователю определенные символы.Вот что я хочу:

• Запретить пользователю начинать и заканчивать подчеркиванием.
• Специальные символы не допускаются
• Символы и цифры допускаются и могут начинаться или заканчиваться либо
• Только символы подчеркивания допускаются между символами / цифрами и снова не в начале иликонец.
• Не должно иметь последовательного подчеркивания.

Ниже приведен код, который у меня есть:

TextBox:

 <input type="text" name="uname" ng-model="uname" required class="form-
  control input-medium" placeholder="Enter  name..." maxlength="20" restrict-
  field="alpha-numeric" ng-trim="false" />

Директива:

.directive("restrictField", function() {
return {
  require: "ngModel",
  restrict: "A",
  link: function(scope, element, attrs, ctrl) {
    var regReplace,
      preset = {
        "alphanumeric-spl": "\\w_./s/g",
        "alphanumeric-underscore": "\\w_",
        "numeric": "0-9",
        "alpha-numeric": "\\w"           
      },
      filter = preset[attrs.restrictField] || attrs.restrictField;

    ctrl.$parsers.push(function(inputValue) {
      regReplace = new RegExp('[^' + filter + ']', 'ig');

      if (inputValue == undefined) return "";
      cleanInputValue = inputValue.replace(regReplace, "");
      if (cleanInputValue != inputValue) {
        ctrl.$setViewValue(cleanInputValue);
        ctrl.$render();
      }
      return cleanInputValue;
    });
  }
   };
  });

Хотя вышеприведенное работает для простых шаблонов, которые я использовал в своих директивах, но не работает для шаблона, который я описал выше.Из моего другого поста я получил шаблон, который можно использовать для отрицательного взгляда на регулярные выражения, как показано ниже:

^(?!_)(?!.*_$)[a-zA-Z0-9_]+$

Но это не работает, если я пытаюсь включить его в свою директиву.

Вот мой пример Codepen, который я создал: https://codepen.io/anon/pen/LJBbQd

Как применить приведенное выше регулярное выражение.Если нет, то есть ли обходной путь или любой другой способ ограничить мое текстовое поле этим регулярным выражением.

Спасибо

Answer 1

Я предлагаю разрешить _ в конце и использовать атрибут шаблона HTML5 с регулярным выражением, которое требует, чтобы последний символ был любым символом, кроме _ с pattern=".*[^_]".Если вам нужно разрешить пустую строку, используйте pattern="(?:.*[^_])?".

var app = angular
  .module("myApp", ["ui.bootstrap"])
  .directive("restrictField", function() {
    return {
      require: "ngModel",
      restrict: "A",
      link: function(scope, element, attrs, ctrl) {
        var regReplace,
          preset = {
            'alphanumeric-spl': '[^\\w\\s./]+', // Removes all but alnum, _ . / whitespaces
            'alphanumeric-underscore': '^_+|_+(?=_)|\\W+', // Removes all _ at start and all _ before a _ and all but alnum and _
            'numeric': '[^0-9]+', // Removes all but digits
            'alpha-numeric': '[\\W_]+' // Removes all but alnum
          },
          filter = preset[attrs.restrictField] || attrs.restrictField;

        ctrl.$parsers.push(function(inputValue) {
          console.log(filter);
          regReplace = RegExp(filter, 'ig');

          if (inputValue == undefined) return "";
          cleanInputValue = inputValue.replace(regReplace, "");
          if (cleanInputValue != inputValue) {
            ctrl.$setViewValue(cleanInputValue);
            ctrl.$render();
          }
          return cleanInputValue;
        });
      }
    };
  });

// Define the `appController` controller on the `ReportsMockUpsApp` module
app.controller("ctrl", function($scope) {});

body {
  padding: 10px
}

input:valid {
  color: black;
  border: 5px solid #dadadada;
  border-radius: 7px;
}

input:invalid {
  color: navy;
  outline: .glowing-border:focus;
  border-color: #ff1050;
  box-shadow: 0 0 10px #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular.min.js"></script>
<div class="container" ng-app="myApp">
  <div ng-controller="ctrl">
    <label>Wow</label>
    <input type="text" pattern=".*[^_]" name="uname" ng-model="uname" required class="form-control input-medium" placeholder="Enter  name..." maxlength="20" restrict-field="alphanumeric-underscore" ng-trim="false" />


  </div>
</div>