Задача очень проста, необходимо добавить маску (фильтр) на поле ввода (input), чтобы у пользователю было доступно вводить данные только в корректном формате IP адреса. Существуют различные пути решения данной задачи. Я могу посоветовать изучить отличный плагин для JQuery, о котором есть статья на Хабре. Переходите по ссылке, там все достаточно подробно описано. Ну а я рассмотрю один из самых коротких вариантов решения данной проблемы, это использование паттернов и регулярных выражений. Ниже приведен пример html5 разметки, которая позволяет жестко задать формат ввода данных под IP адрес и не пропускать пользователя, пока данные ни будут соответствовать необходимому шаблону.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Маска IP адреса</title> <meta name="author" content="Shvanov Vadim [https://shwanoff.ru]"> </head> <body> <form> <p>Введите IP адрес в формате 255.255.255.255</p> <p><input type="ip" pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"></p> <p><input type="submit" value="Отправить"></p> </form> <footer> <p>© 2018 - <a href="https://shwanoff.ru">Шванов Вадим</a> </footer> </body> </html> |
Обратите внимание на атрибут поля input с именем pattern. Именно в нем задается регулярное выражение позволяющее вводить любой действительный IP адрес. В качестве разделителя используется точка, каждое число в блоке может принимать значения от 0 до 255. Если условия регулярного выражения не выполняются возможность нажать кнопку «Отправить» блокируется, а пользователю отображается сообщение. На рисунке ниже можно увидеть результат.
Корректный ввод IP адреса
Ввод некорректных данных
P.S. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
