Основой html форм являются input поля, которые могу быть паролем, email-ом или любым другим типом данных. Эти элементы используются для взаимодействия с пользователем.
Однако, пользователь может ввести любое количество символов и отправить их на php обработку. А что, если он в поле Имя введет 1 символ или 1000? Давайте защитим нашу форму.
Пусть есть такой input:
1 способ. Самый простой метод задать минимальную и максимальную длину в поле — использование атрибутов minlength и maxlength. Иземним input так:
Теперь если мы попробуем отправить форму, то браузер перехватит событие и проверит число символов введенных в этом поле. В случае, если их будет меньше 5, он выдаст предупреждение и не отправит форму. А maxlength=»20″ просто не даст пользователю ввести большее число символов, чем 20.
2 способ. Никто мне не мешает в 1 способе, открыть исходный код этой формы и удалить из input-а эти атрибуты — так я смогу легко обойти ограничения на ввод. Давайте напишем, код, который будет проверять введенное число символов пользователем и помечать поле красным, если что-то не так, а если все в порядке, то зеленым.
Проверка на минимальное число символов
$(‘[name=»marka»]’).on(«click keyup change blur», function() <
if($(this).val().length
Одновременно, на одно и тоже поле нельзя поставить эти две проверки — только одну. Если вам нужно проверять одновременно на мин. и макс. число символов введенных пользователем в поле, то используйте такую конструкцию:
$(‘[name=»marka»]’).on(«click keyup change blur», function() <
if($(this).val().length >= 5 && $(this).val().length
При такой проверке, скрипт будет срабатывать при каждом нажатии клавиши. Если число символов будет меньше 5, поле станет красным, если от 5 до 20 — зеленым и если больше 20, то снова красным.
К сожалению, код проверки длины символов получился громоздким. В следующем материале я сделаю функцию форматирования input полей. И кстати, от злоумышленников, код не спасет — его также легко обойти, поэтому последняя проверка всегда должна идти методами PHP.
Атрибут maxlength , тега , устанавливает максимальное количество символов для ввода в текстовое поле, только для type= «text» или «password» . Причем, значение данного атрибута может быть больше значения указанного в size . В этом случае можно прокручивать строку, используя стрелки «влево» и «вправо» на клавиатуре или мышь.
Ограничение максимального количества символов при помощи атрибута maxlength используется по разным причинам. Например, программа-обработчик, которой отправляются данные формы, может работать только с ограниченными по длине строками. Или представьте, что вы используете форму для отправки вам сообщения по электронной почте. И представьте еще раз, что будет, если кто-то вам по почте решит отправить полное собрание сочинений Виктора Гюго одной строкой. Поэтому лучше всегда ставить максимально допустимый предел для количества символов.
Значения
Значением атрибута является целое положительное число, которое задает максимальное количество символов.
Значение по умолчанию: Можно ввести неограниченное количество символов.
Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным.
Синтаксис
Значения
Любое целое положительное число.
Значение по умолчанию
Ввод символов не ограничен.
Пример
Браузеры ?
| 2 | 12 | 1 | 1 | 1 | 1 |
| 1 | 1 | 6 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.