input поля - проверяем минимальное и максимально допустимое число символов с помощью jQuery

Основой html форм являются input поля, которые могу быть паролем, email-ом или любым другим типом данных. Эти элементы используются для взаимодействия с пользователем.

Однако, пользователь может ввести любое количество символов и отправить их на php обработку. А что, если он в поле Имя введет 1 символ или 1000? Давайте защитим нашу форму.

Пусть есть такой input: <input type=”text” name=”marka”>

1 способ. Самый простой метод задать минимальную и максимальную длину в поле – использование атрибутов minlength и maxlength. Иземним input так:

Теперь если мы попробуем отправить форму, то браузер перехватит событие и проверит число символов введенных в этом поле. В случае, если их будет меньше 5, он выдаст предупреждение и не отправит форму. А maxlength=”20″ просто не даст пользователю ввести большее число символов, чем 20.

2 способ. Никто мне не мешает в 1 способе, открыть исходный код этой формы и удалить из input-а эти атрибуты – так я смогу легко обойти ограничения на ввод. Давайте напишем, код, который будет проверять введенное число символов пользователем и помечать поле красным, если что-то не так, а если все в порядке, то зеленым.

Проверка на минимальное число символов
$(‘[name=”marka”]’).on(“click keyup change blur”, function() {
if($(this).val().length < 5) { $(this).attr(‘style’, ‘border: 1px solid red;’); } else { $(this).attr(‘style’, ‘border: 1px solid green;’); }
});

Проверка на максимальное число символов
$(‘[name=”marka”]’).on(“click keyup change blur”, function() {
if($(this).val().length > 20) { $(this).attr(‘style’, ‘border: 1px solid red;’); } else { $(this).attr(‘style’, ‘border: 1px solid green;’); }
});

Одновременно, на одно и тоже поле нельзя поставить эти две проверки – только одну. Если вам нужно проверять одновременно на мин. и макс. число символов введенных пользователем в поле, то используйте такую конструкцию:

$(‘[name=”marka”]’).on(“click keyup change blur”, function() {
if($(this).val().length >= 5 && $(this).val().length <= 20) { $(this).attr(‘style’, ‘border: 1px solid green;’); } else { $(this).attr(‘style’, ‘border: 1px solid red;’); }
});

При такой проверке, скрипт будет срабатывать при каждом нажатии клавиши. Если число символов будет меньше 5, поле станет красным, если от 5 до 20 – зеленым и если больше 20, то снова красным.

К сожалению, код проверки длины символов получился громоздким. В следующем материале я сделаю функцию форматирования input полей. И кстати, от злоумышленников, код не спасет – его также легко обойти, поэтому последняя проверка всегда должна идти методами PHP.