Основой html форм являются input поля, которые могу быть паролем, email-ом или любым другим типом данных. Эти элементы используются для взаимодействия с пользователем.
Однако, пользователь может ввести любое количество символов и отправить их на php обработку. А что, если он в поле Имя введет 1 символ или 1000? Давайте защитим нашу форму.
Пусть есть такой input: <input type="text" name="marka">
1 способ. Самый простой метод задать минимальную и максимальную длину в поле - использование атрибутов minlength и maxlength. Иземним input так:
<input type="text" name="marka" minlength="5" maxlength="20">
Теперь если мы попробуем отправить форму, то браузер перехватит событие и проверит число символов введенных в этом поле. В случае, если их будет меньше 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.
