Валидация телефонных номеров — важный аспект веб-форм, особенно если ваша аудитория охватывает несколько стран. К счастью, с помощью плагинов jQuery.inputmask-multi и jQuery-validation вы можете настроить гибкую и точную валидацию, которая работает для номеров телефонов по всему миру. В этой статье мы рассмотрим, как интегрировать эти плагины и настроить валидацию телефонного номера на вашем сайте.
Шаг 1: Подключение необходимых библиотек
Прежде чем начать, убедитесь, что вы подключили jQuery и оба плагина (jquery.inputmask-multi и jquery-validation) к вашему проекту. Это можно сделать через CDN или локальные файлы.
|
1 2 3 4 5 6 |
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery Validation --> <script src="https://cdn.jsdelivr.net/jquery.validation/1.19.3/jquery.validate.min.js"></script> <!-- jQuery Inputmask Multi --> <script src="path/to/jquery.inputmask-multi.min.js"></script> |
Шаг 2: Настройка jquery.inputmask-multi
Плагин jquery.inputmask-multi позволяет создать маску для ввода телефонных номеров с поддержкой множества стран. Для начала, нужно создать файл с масками (например, phone-codes.json), или использовать готовый – https://github.com/andr-04/inputmask-multi/blob/master/data/phone-codes.json
Пример настройки маски:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var maskList = $.masksSort( $.masksLoad( "/js/phone-codes.json" ), ["#"], /[0-9]|#/, "mask" ); var maskOpts = { inputmask: { definitions: { "#": { validator: "[0-9]", cardinality: 1 } }, //clearIncomplete: true, showMaskOnHover: true, oncomplete: function (evt) { $(evt.currentTarget).parent('.form-line').removeClass('error-tel'); }, // oncomplete: function () { // }, // onincomplete: function () { // }, autoUnmask: true }, match: /[0-9]/, replace: "#", list: maskList, listKey: "mask" // onMaskChange: function(maskObj, completed) { // // } }; var $phoneInput = $(document).find(".js-phone-input"); $phoneInput.inputmasks(maskOpts); |
Шаг 3: Настройка jquery-validation для валидации телефона
Теперь, когда у нас есть маска, добавим валидацию для номера телефона с помощью jquery-validation. В частности, нам нужно добавить кастомный метод валидации, который проверяет минимальную длину номера в зависимости от текущей маски.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$.validator.addMethod("minlengthphone", function (value, element) { // Извлекаем только цифры из номера телефона var phoneLength = value.replace(/\D+/g, '').length; // Получаем экземпляр Inputmask var mask = $(element).inputmask("getmetadata"); // Если метаданные маски существуют, определяем минимальную длину if (mask) { var minLength = mask.replace(/[^#]/g, '').length; // console.log("mask: "+mask); // console.log("phoneLength: "+phoneLength); // console.log("minLength: "+minLength); // console.log("minLength: "+phoneLength >= minLength); return phoneLength >= minLength; } // Если маска не найдена, используем минимальную длину 7 цифр return phoneLength >= 7; }, objTxtSite.req_field); |
