AngularJS - проверка правильности номера телефона на трех языках

Question

AngularJS - проверка правильности номера телефона на трех языках

6 ов принято

+50

Для этого вы можете использовать директиву с обработкой событий.

Updated Fiddle

К ключевым изменениям относятся следующие:

1) Загрузите jQuery в свою скрипку до углового, чтобы получить доступ к селекторам jQuery внутри угловых функций.

2) Оберните свои входы в контейнер с соответствующей директивой (Примечание: это также можно сделать с помощью одного элемента restrict: "A"вместо templateи использовать inputсвойство для определения дочернего HTML)

3) Управляйте inputсобытием на входах, и если длина превышает значение в maxlengthсвойстве, сфокусируйте следующий вход. Это очень просто с jQuery, но можно сделать без него, если вы действительно этого захотите.

4) Есть миллионы способов сделать проверку на входах, но я включил простой метод.

HTML

<div phone-input>
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone1-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{3}$">
    <input type="text" value="" maxlength="3" class="area-code input-mini aid-primary-phone2-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{3}$">
    <input type="text" value="" maxlength="4" class="area-code input-mini aid-primary-phone3-lbl" 
         aria-label="Primary contact number" pattern="^[0-9]{4}$">
</div>

Угловая директива

.directive("phoneInput", function () {
  return {
    restrict: "A",
    link: function (scope, element, attrs) {
      function checkForErrors(input) {
        var errors = "";
        if (!new RegExp(input.attr("pattern")).test(input.val())) {
            errors += `Field must contain ${input.attr("maxlength")} numbers!
`;
        }
        return errors;
      }
      element.on("input", "input", function () {
        var trigger = $(this);
        if (trigger.val().length >= trigger.attr("maxlength")) {
            trigger.blur().next().focus();
        }
      });

      element.on("blur", "input", function () {
        var trigger = $(this);
        var errors = checkForErrors(trigger);
        trigger.attr("title", errors);
        if (trigger.val().trim() === "") {
            trigger.addClass("invalid-field");
            trigger.attr("title", "Field cannot be empty!");
        }
        else if (errors === "") {
          trigger.removeClass("invalid-field");
        }
        else {
          trigger.addClass("invalid-field");
          trigger.focus();
        }
      });
    }
  }
})

JQuery, angularjs, проверка,

jquery,angularjs,validation,

8

Ответов: 1