У вас же есть кнопка «Заказать звонок». После того, как пользователь ввёл номер телефона, предполагается, что он нажмёт на эту кнопку. У вас есть время, чтобы успеть вывести сообщение о том, на какой номер будет совершён вызов. Будет ли?
Вам ни в коем случае нельзя мешать пользователю вводить данные, лучше напишите позднее, что не так с вводом! Пользователь даже может не заметить, что какой-либо символ не был введён!
Цитата:
Сообщение от Igorsrt
Можно ли сделать, что бы эта «8» игнорировалась (удалялась), если её вставляют в начало номера?
|
Trunk prefix может быть удалён (или заменён на «+7») при помощи регулярного выражения, после того, как номер прошёл проверку на действительность.
Код:
x (xxx xx)x-xx-xx
x (xxx x)xx-xx-xx
x (xxx) xxx-xx-xx
^ ^^^ ^^^^^^^^^^
| ||| местный
| ||| номер
| код
| местности
|
код
страны
Как я понимаю, вам нужны исключительно номера абонентов из Российской Федерации (РФ), то номер телефона будет начинаться с «+7», но не с «+76» или с «+77» (Казахстан) и не с «+7840» или с «+7940» (Абхазия). Также вы можете указать рядом с полем ввода, что необходимо ввести номер, зарегистрированный в РФ, в таком случае могут быть разрешены номера без кода страны и с
trunk prefix.
Местные номера в РФ могут состоять из 5, 6 или 7 цифр, но вам нужно, чтобы посетители вводили номер вместе с кодом местности. Национальный номер состоит из 10 цифр, в который входят код местности (3 цифры) и номер абонента (7 цифр).
Цитата:
Сообщение от Igorsrt
мне почему-то кажется, что все телефоны на 9 начинаются... но если не прав, то поправьте. Как тогда быть?
|
Вы абсолютно правы в случае номеров мобильных телефонов в РФ!
Цитата:
Сообщение от Igorsrt
что бы он позволял и 10 и 11 цифр ввести
|
В общем виде номер телефона в РФ можно представить так:
/^(?<country>\+?7|8|0)?(?<area>\d{3})(?<number>\d{7})$/
Группа area может быть выражена более точно так:
/^(?![89]40|97[0-1])(?:[349]\d{2}|8[1-7]\d)$/
https://en.wikipedia.org/wiki/Teleph...bers_in_Russia
https://en.wikipedia.org/wiki/List_o..._calling_codes
Вот пример целиком...
<form method="post">
<input type="tel" autocomplete="tel" name="phone" placeholder="Ваш телефон∗" required>
<p class="info"></p>
</form>
<script>
document.addEventListener("input", ({ target }) => {
if(target.matches("input[type=tel]")) {
const phone = target.value.trim()
.replace(/[^\+\d]/g, "")
.replace(/(.)\++/g, "$1");
let match, message;
if (match = phone.match(/^(\+?7|8|0)?((?![89]40|97[0-1])(?:[349]\d{2}|8[1-7]\d))(\d{7})$/)) {
const [, country, area, number] = match;
message = `
<p>Мы позвоним вам по номеру +7 (${area}) ${number.replace(/(\d{2})(?=(?:\d{2})+$)/g, "$1-")}</p>
<p>
<button>Подтвердить</button>
<button type="reset">Отменить</button>
</p>
`;
} else {
message = "Введён неверный номер!";
}
document.querySelector("input[type=tel] + .info").innerHTML = message;
target.setCustomValidity(match ? "" : "Введён неверный номер");
}
});
</script>
Цитата:
Сообщение от laimas
Пишите свой обработчик, задача которого просто проверять чтобы было 11 цифр в итоге и в начале 7 (с плюсом или нет, не важно) или 8
|
Достаточно 10 цифр, без плюса номер 7xxxxxxxxx нормализуется до +77xxxxxxxxx, но это номер не из РФ.
Цитата:
Сообщение от Igorsrt
Я за любое разумное решение данной проблемы )
|
Цитата:
Сообщение от j0hnik
Самое зло которое бывает, при копировании и вставке номера будет исчезать какая-то цифра, что зачастую даже на крупных порталах, где штат разрабов присутствует.
|
В input[type=tel] всё нормально вставляется.
Вполне корректными могут быть такие запросы...
«9161234567»
«916-123-45-67»
«8916-1-234-567»
«+7 (916) 123-45-67»
«Тел.: +79161234567»
«позвоните на +79161234567»
Во всяком случае формы с побочными эффектами должны, по моему мнению, сообщать, что же в результате произойдёт!
P. S. Используйте атрибут autocomplete="tel" и type="tel" дабы пользователям не производить лишних телодвижении на не той клавиатуре.