Задача очень проста, необходимо добавить маску (фильтр) на поле ввода (input), чтобы у пользователю было доступно вводить данные только в корректном формате IP адреса. Существуют различные пути решения данной задачи. Я могу посоветовать изучить отличный плагин для JQuery, о котором есть статья на Хабре. Переходите по ссылке, там все достаточно подробно описано. Ну а я рассмотрю один из самых коротких вариантов решения данной проблемы, это использование паттернов и регулярных выражений. Ниже приведен пример html5 разметки, которая позволяет жестко задать формат ввода данных под IP адрес и не пропускать пользователя, пока данные ни будут соответствовать необходимому шаблону.
<!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. Присоединяйся в любой удобной для тебя социальной сети. Для меня очень важно оставаться с тобой на связи, ведь у меня есть еще много полезной информации о программировании для тебя, которой я хочу с тобой поделиться.
