Валидация телефонных номеров в JavaScript: 3 формата

Быстрый ответ

Для проверки корректности телефонного номера применяются регулярные выражения JavaScript:

function isValidPhone(phone) {
  return /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/.test(phone);
}

console.log(isValidPhone("123-456-7890")); // Вернёт true или false

Функция isValidPhone проводит проверку номеров на соответствие установленному американскому формату. Регулярное выражение можно адаптировать для конкретного проекта.

Универсальное регулярное выражение

Возможность проверки различных форматов телефонных номеров требует регулярного выражения с расширенной гибкостью. Это позволяет учитывать скобки, пробелы, разнообразные разделители и даже коды стран. Продемонстрируем модификацию предыдущего регулярного выражения:

function validatePhoneNumber(input) {
  const regex = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
  return regex.test(input);
}

console.log(validatePhoneNumber("(123) 456-7890")); // true
console.log(validatePhoneNumber("123.456.7890"));   // true
console.log(validatePhoneNumber("+31636363634"));   // true

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

Визуализация

Ваш код для проверки телефонных номеров можно представить как контролёра, проверяющего билеты перед поездкой:

function validatePhoneNumber(phoneNumber) {
  const pattern = /^[+]?[(]?[0-9]{1,4}[)]?[-\s.]?[0-9]{1,4}[-\s.]?[0-9]{1,4}$/;

  return pattern.test(phoneNumber);
}

Результат проверки корректности:

|   Телефонный номер |   Корректен?  | Визуальная подсказка |
|   +123-456-7890    |      ✅       | Правильный билет 🎫   |
|       12345        |      ❌       | Некорректный билет ❓ |

В данном контексте каждый телефонный номер — это пассажир, который должен иметь билет, чтобы совершить поездку на вашем поезде корректности.

Создание удобного интерфейса для ввода номеров

Интерфейс для ввода номеров должен быть интуитивно понятным и удобным, способствующим правильному вводу данных:

<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">

Международная привлекательность: всеядный шаблон regex

Универсальность регулярных выражений важна при работе с международными номерами. Для этой задачи отлично подойдёт библиотека Google libphonenumber-js.

Подробнее об этом расскажет наш спикер на видео

Раннее форматирование номеров: Организация четкой структуры

Соблюдение единообразия данных позволяет структурировать их и поддерживать порядок в базе данных.

Многоступенчатая проверка: Удвоенная безопасность

Многоступенчатая проверка на стороне клиента, а затем и на стороне сервера, обеспечивает надёжность и точность проведения процесса валидации.

Полезные материалы

1. Подробное описание реализации проверки форм с помощью JavaScript на MDN.
2. Глубокое изучение регулярных выражений в JavaScript на MDN.
3. Функциональная библиотека для работы с международными телефонными номерами libphonenumber-js.
4. Руководство по использованию <input type="tel"> на w3schools.
5. Обсуждение на Stack Overflow об регулярном выражении для стандартных 10-значных телефонных номеров.
6. Официальный репозиторий Google libphonenumber для работы с телефонными номерами.
7. Понятное руководство по регулярным выражениям от книги "Eloquent JavaScript".