BoostClicks - Евгений Леонтьев: “Добавил в сервисы на 3kota проверку номера телефона. Телефон не просто…”

Добавил в сервисы на 3kota проверку номера телефона.
Телефон не просто проверяется по коду страны или коду оператора,
а проверяет резервирование номера конкретным оператором связи, валидность и существования номера.

Как все прекрасно знают, есть несколько способов контролировать ввод номера на лендингах.
Условно простой скрипт, который находит на сайте все name="phone" и запрещает вводить другие символы, кроме цифр, а так же устанавливает обязательную длину номера, от 5 до 13 символов:

<script>
document.addEventListener('input', function (e) {
    if (e.target.matches('input[name="phone"]')) {
        e.target.value = e.target.value
            .replace(/\D/g, '')
            .slice(0, 13);
    }
});

document.addEventListener('blur', function (e) {
    if (e.target.matches('input[name="phone"]')) {
        if (e.target.value.length < 5) {
            e.target.setCustomValidity('Введите минимум 5 цифр');
        } else {
            e.target.setCustomValidity('');
        }
    }
}, true);
</script>

Второй способ, это установка маски от intl-tel-input. Которая подставляет флаг и маску нужной вам страны:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('input[name="phone"]').forEach(input => {
        const iti = intlTelInput(input, {
            initialCountry: 'de',
            nationalMode: false,
            separateDialCode: false,
            autoPlaceholder: 'off',
            formatOnDisplay: false,
            utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.2.16/js/utils.js'
        });

        input.addEventListener('blur', () => {
            if (iti.isValidNumber()) input.value = iti.getNumber();
        });

        input.addEventListener('input', () => {
            input.setCustomValidity('');
        });

        input.setPhoneCountry = country => {
            iti.setCountry(country.toLowerCase());
            input.value = '+' + iti.getSelectedCountryData().dialCode;
        };
    });
});
</script>

И третий способ, как это работает в примере выше - это валидатор.
Идем на сайт number.boostclicks.tech регаемся и получаем 500 проверок бесплатно.
Работает по апи, и очень легко встраивается в лендинги.
Пример запроса cURL

curl -X POST "https://number.boostclicks.tech/api/v1/verify" \
  -H "X-API-Key: $NUMBER_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"phone":"+14155552671"}'

И в ответ нам приходит вся информация по номеру. Валидность, тип сети, гео, оператор.
Если есть проблемы с трешем - это Маст-хэв

Всем хороших выходных 😉