Использование 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, напишите об этом в комментариях!

Перевод статьи “ Using jQuery Mask to Mask Form Input ” был подготовлен дружной командой проекта Сайтостроение от А до Я.