Использование jQuery Mask для маскировки ввода через форму

Использование jQuery Mask для маскировки ввода через форму

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

  • Страница проекта на GitHub находится здесь.
  • Страница с примерами и документацией.

Что такое jQuery Mask?

jQuery Mask – это плагин для создания масок полей ввода форм и HTML-элементов( maskedinput). Плагин прост в использовании и дружелюбен к посетителям. Хотя он изменяет вводимые данные, он делает это, не меняя того, что видит посетитель.

Посмотреть просмотр

К примеру, если вы напечатаете « 555-555-5555 » в поле ввода ввода номера телефона, «-» просто будет пропущено. Плагин сам обработает введенные символы так, чтобы они соответствовали маске. Пройдемся по наиболее важным частям демонстрационного кода. Недавно я добавил в плагин две библиотеки:

  • JQuery.
  • jQuery Mask.

Данные библиотеки добавлены в параметра на CodePen. Ссылки на них необходимо прописать в коде проекта, чтобы он работал.

Чтобы наложить маску на ввод, необходимо добавить селектор jQuery и возможность .mask( …) или использовать атрибут HTML data-mask.

Селектор jQuery

Ниже показан пример, в котором используется селектор jQuery. В примеры с почтовым индексом и номером телефона также применяется этот способ, а в примере с номером страховки( SIN number) – атрибут data-mask.

$('input[name="date"]').mask('00/00/0000');

// «date» — дата

Я использовал имя поля ввода ввода, чтобы выбрать его, а далее наложил на него маску при помощи возможности .mask( …). Она принимает последовательность чисел и букв и форматирует их при помощи регулярных выражений:

00/00/0000

К примеру, 12/04/2017.

Но посетитель все ещё может перепутать дни и месяцы. Так что для дат я все же рекомендую использовать Date Picker из jQuery UI.

Функцию .mask( …) знает как форматировать введенные данные определенным образом, так как в плагине определен «словарь» символов. По умолчанию перевод следующий:

  • ‘0’: {pattern: /d/}
  • ‘9’: {pattern: /d/, optional: true}
  • ‘#’: {pattern: /d/, recursive: true}
  • ‘A’: {pattern: /[a-zA-Z0-9]/}
  • ‘S’: {pattern: /[a-zA-Z]/}

Если планируете переопределить или добавить что-то, руководствуйтесь следующим примеров, взятым из документации по jQuery Mask:

// сейчас цифра 0 в паттерне маски будет восприниматься // как разрешенный символ вроде 0,1,2,3,4,5,6,7,8,9 и *$('. your-field').mask('00/00/0000', {'translation': {0: {pattern: /[0-9*]/}}});

Атрибут данных HTML

Применение атрибута data похоже на использование селектора, только маску необходимо вставить напрямую в

<input … />

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

<input type="text" name="social-insurance" data-mask="000 000 000" />

//»social-insurance» — социальная страховка

Использование jQuery Mask в WordPress

Для использования jQuery mask в WordPress, включите его в очередь скриптов в файле functions.php. Приведенный ниже программный код будет работать, если в теме есть папка /js:

<?php wp_enqueue_script( 'theme_slug-jquery-mask-js', get_template_directory_uri(). '/js/jquery.mask.min.js', array(), false, true);?>

Я надеюсь, что после прочтения статьи вы попробуете jQuery Mask. Если у вас замечания по jQuery Mask, напишите об этом в комментариях!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *