В этом небольшой записи я хочу поделиться замечательным плагином, который облегчит вам жизнь, когда вы работаете с формами.
Часто, когда вы используете формы во время разработки, приходится ставить для них определенный формат. Например input телефон будет выглядеть примерно вот так: 7(000)-000-00-00 или в таком (000)-000-00-00 или даже так 0000000000.
Все на самом деле зависит от требований и номер телефона какой страницы будет проверяться, потому что если будет проводиться проверка для Украины, то данный формат не подойдет и уже нужно использовать другой.
В сети есть прекрасный плагин, который называется Mask Plugin. Он позволяет накладывать маску на input (так же называют masked input), тем самым запрещая пользователю ввести какой-либо другой формат.
Вот ссылка на GitHub данного плагина. А вот демо.
С ним можно настраивать ввод даты, время, формат введения денежных средств, телефон, ZIP-коды и тд. Очень много разных функций, которые можно очень легко настроить.
Как установить данный плагин?
- Переходим на эту страницу, скачиваешь файл (нажимаешь CTRL + S) и устанавливаем в нужную папку на вашем сайте.
- После чего вам нужно подключить скрипт который вы скачали в этапе номер 1 на ваш сайт, желательно перед закрытием тега
</body>.<script src="путь/до/папки/jquery.mask.js"></script>
- Далее вам нужно иметь какой-нибудь input, которому нужен формат, в данном случае, я буду использовать формат телефона в виде 7(000)-000-0000.
<input type="text" id="phone" />
- После чего используем функцию плагина для обработки input с классом date.
$('#phone').mask('7(000)-000-0000');
Как это все работает?
После 4-го этапа плагин начинает отслеживать за изменениями в input’е c id phone, если у нем есть нажатие клавиши или еще какие-то действия, то проверяется формат введенных данных. Если данные введены правильно, то они остаются внутри, если не правильно, то они удаляются.
Если вам нужны другие возможности данного плагина, то вы можете посмотреть на странице официального разработчика. Он предоставляет подробную документацию к использованию этого скрипта.
PS. Когда вы работаете с формами никогда не забывайте, что все скрипты, которые вы используете со стороны клиента (front-end) можно очень легко изменить. Поэтому знающий человек может убрать данную защиту и ввести туда что угодно. Для чего я это говорю? Я хочу, чтобы вы обезопасили себя с серверной части (back-end), особенно если вы принимаете какие-то данные из формы.
Если у вас есть какие-либо вопросы задавайте их в комментарии ниже. Я буду рад вам помочь.
