Валидация телефона по маске jQuery

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

Ниже простой вариант для формата +7 (999) 999-99-99.

Безопасный вариант без зависимостей

Для одного поля телефона часто достаточно обычного JavaScript.

<input type="tel" id="phone" name="phone" inputmode="tel" autocomplete="tel" placeholder="+7 (___) ___-__-__" />

<script>
document.addEventListener("DOMContentLoaded", function () {
  var input = document.getElementById("phone");
  if (!input) return;

  input.addEventListener("input", function () {
    var digits = this.value.replace(/\D/g, "");
    if (digits.charAt(0) === "8") digits = "7" + digits.slice(1);
    if (digits && digits.charAt(0) !== "7") digits = "7" + digits;
    if (!digits) digits = "7";
    digits = digits.slice(0, 11);

    var result = "+7";
    if (digits.length > 1) result += " (" + digits.slice(1, 4);
    if (digits.length >= 4) result += ")";
    if (digits.length > 4) result += " " + digits.slice(4, 7);
    if (digits.length > 7) result += "-" + digits.slice(7, 9);
    if (digits.length > 9) result += "-" + digits.slice(9, 11);

    this.value = result;
  });
});
</script>

Проверка перед отправкой

var phone = document.getElementById("phone").value;
var isValid = /^\+7 \(\d{3}\) \d{3}-\d{2}-\d{2}$/.test(phone);

Проверка на сервере

Если форма отправляется через FormIt или свой обработчик, очищайте номер и проверяйте его уже на сервере.

<?php
$phone = preg_replace('/\D+/', '', $_POST['phone'] ?? '');
$isValid = preg_match('/^7\d{10}$/', $phone);

Подводные камни

• Маска помогает ввести номер красиво, но не подтверждает, что номер настоящий.
• Для интеграций удобнее хранить очищенный номер без пробелов, скобок и дефисов.
• Если номер не обязателен по бизнес-логике, не делайте обязательным просто потому, что поле уже есть.
• Фронтенд-маска не заменяет серверную проверку.

Современный сценарий для MODX

Форма на FormIt или AjaxForm, легкая маска на фронте и серверная проверка номера перед отправкой письма или сохранением. Этого обычно достаточно для нормальной рабочей формы.

Связанные статьи

• FormIt в MODX
• Подключение MODX к базе данных

Актуально для: MODX Revolution 2.8+, MODX 3.x, PHP 8.1+, современные браузеры, FormIt/AjaxForm для форм.