Как сохранить проверенный замаскированный номер телефона в США с помощью ng-pattern в AngularJS от недействительности, если введено слишком много цифр

Question

Как сохранить проверенный замаскированный номер телефона в США с помощью ng-pattern в AngularJS от недействительности, если введено слишком много цифр

0

Я пытаюсь выяснить способ подтверждения ввода, который замаскирован, чтобы отображать номера телефонов в США, как (###) ###-#### Я пробовал несколько вещей, и ближайшая вещь, которую я нашел, использует

<form name="phone_form" novalidate>
    <input name="phone" class="phone_us" type="tel" ng-model="phone" placeholder="(555) 555-1212" ng-pattern="/^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/" />
    <span style="color:red" ng-show="phone_form.phone.$error.pattern">Invalid Phone Number</span>
</form>

Я вытащил регулярное выражение из: - Уравновешивание динамического ng-шаблона Angularjs - Это успешно проверяет ввод и соответствует варианту использования, оно даже вызывает правильную ошибку и отображает правильное сообщение. Однако, как только вы вводите любую цифру, превышающую 10 цифр номера телефона, происходит сбой, и вход снова недействителен. Если я перешагую одну цифру и добавлю еще одну цифру, тогда вход будет проверяться еще раз, пока я не добавлю больше цифр. Поле замаскировано, чтобы вы не могли видеть никаких дополнительных цифр за пределами отображаемого номера телефона, и даже если вы попытаетесь ввести 10 цифр за действительный номер телефона, все, что вам нужно сделать, чтобы повторно подтвердить форму успешно, возвращает одну цифру и вводит ее снова.

Я пробовал несколько вариантов максимальной длины и минимальной длины или max = "#" и т.д. И я не могу понять это.

Я использую Angular 1.5.7

Здесь вы можете найти место, где я нахожусь:

http://plnkr.co/edit/Ln7SciLSpnLJRZdA0P2N?p=preview

OGZCoder 19 июль 2016, в 00:43

Источник

0

До сих пор думаю о лучшем способе решить эту проблему, но вы увидите, что это (частично) связано с mask.js ... при удалении $('.phone_us').mask('(000) 000-0000'); вы увидите, что значение phone самом деле длиннее 10 цифр (и, следовательно, недопустимо), но выглядит корректно из-за .mask() .
Sam 18 июль 2016, в 22:24
0

Что касается решения, возможно, лучше всего создать пользовательскую директиву для предотвращения не числа, а не использовать ngPattern для проверки. Это, на мой взгляд, будет хорошо работать с .mask() .
Sam 18 июль 2016, в 22:26

Теги:

javascript

angularjs

regex

validation

forms

1 ответ

Ещё вопросы

До сих пор думаю о лучшем способе решить эту проблему, но вы увидите, что это (частично) связано с mask.js ... при удалении $('.phone_us').mask('(000) 000-0000'); вы увидите, что значение phone самом деле длиннее 10 цифр (и, следовательно, недопустимо), но выглядит корректно из-за .mask() .
Что касается решения, возможно, лучше всего создать пользовательскую директиву для предотвращения не числа, а не использовать ngPattern для проверки. Это, на мой взгляд, будет хорошо работать с .mask() .

developer033 · Accepted Answer · 2016-07-18T22-20-00.000Z

Я бы порекомендовал вам использовать модуль ngMask. Посмотрите, как просто использовать его ниже:

angular.module('app', ['ngMask'])
 .controller('mainCtrl', function($scope) {
   
 });

<html ng-app="app">

<head>
  <script src="/angular.min.js"></script>
  <script src="/ngMask.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <form name="phone_form" novalidate>
    <input type="text" name="text" class="phone_us" ng-model="phone" placeholder="(555) 555-1212" mask="(999) 999-9999" restrict="reject">
  </form>
</body>

</html>

Да ... спасибо .. определенно самый простой способ!