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

В наше время особенно актуальными становятся всевозможное упрощение пользовательского интерфейса. Не для кого не секрет, что посетители сайта, будь то покупатель в интернет-магазине или пользователь одностраниченого веб-приложения, предпочитают быть ведомыми во всех случаях, касающийся ввода пользователем данных. Людям свойственно испытывать дискомфорт, вредких случаях переходящий в панический ужас, когда им система не дает абсолютно четкой реакции на выполняемые им действие. Будучи веб-мастером вы, конечно же хотите дать пользователю все, и даже чуточку больше. Сегодня вы ввели в поисковик «Валидация телефона jquery» bожидаете быстро найти идеальное решение для этой задачи. Окей, как говриться «..их есть у меня». так, хватит болтавни, давайте валидировать!

Скорее введите случайный набор символов, и удивитесь результату. Да, это именно то, что вы так долго искали:

Скрипт называется jquery.inputmask.min.js. Чтобы его подключить нужно написать:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://site.ru/jquery.inputmask.min.js"></script>

Потом инициализируем скрипт:

<script>
$(document).ready(function() {
$('.telephonetext').inputmask("+7(999)999-99-99");
});
</script>

Выражение для проверки данных введенных таким способом (ведь никто не исключает, что пользователь может заснуть во время ввода телефона, а проснувшись просто нажить "отравить"):

var tph = document.getElementById("phone").value;
tph = !tph.match(/^\([0-9]{3}\)[0-9]{3}-[0-9]{2}\-[0-9]{2}/);

Выражение для проверки для симплы (это выражение я использую для валидации телефона в модуле Simple для CMS OpanCart):

/^\+{1}\d+\({1}\d+\)\d{1,3}\-\d{2}\-\d{2}/

К минусам скрипта можно отнести его чудовищный вес. Даже в минифицированном виде он весит 36 КБ, что не намного меньше веса библиотеки jQuery, которая, мягко говоря, выполняет чуть больше функций.

Также почему-то скрипт не отработал во всплывающем окне. Веротяно нужно было еще разок вызвать $('.telephonetext').inputmask("+7(999)999-99-99");, но там я закрыл вопрос более легким скриптом - letJS. Почему я его не использую всегда? а потому что он требудет чтобы для инпута были прописаны data-атрибуты, которые не всегда есть возможность прописать.


Комментарии (1)

  1. Bransonvat:
    20 Feb 2017г. в 19:57

    Благодарю, все заработало...



Разрешённые теги: <b><i><br>Добавить новый комментарий:


Создание сайтов в студии go-up.info