Проверять формат ввода полей формы от пользователя всегда нужно до обработки php скрипта. Это удобно пользователю – он знает уже до отправки, правильно и заполнил поля. И полезно сайту, так как не расходует ресурсы на постоянные php запросы.
Поскольку проверки могут быть очень разными. Я постарался сделать универсальную функцию, которая способна проверять:
- заполнено ли поле (обязательное);
- минимальное число символов для заполнения;
- максимальное число символов;
- trim обрезка (обнуляет пробелы по “краям” поля);
- проверка формата введенных данных по регулярке, например, разрешить ввод только цифр
Причем, можно как все проверки сразу, так и выбрать только некоторые. Это очень удобно, так как где-то надо проверять форму на ввод обязательных полей или разрешить ввод только 10 символов, или только русский алфавит. А в другом поле использовать комбинации таких проверок.
Итак, начнем. Создайте такую форму:
<form method=”post” id=”forma_required”>
<input type=”text” name=”marka” placeholder=”Марка * от 5 до 10 символов”>
<input type=”text” name=”color” placeholder=”Цвет * от 3 символов”>
<input type=”text” name=”dviga” placeholder=”Двигатель * – только трим”>
<input type=”text” name=”cifri” placeholder=”Только цифры”>
<input type=”text” name=”bykvi” placeholder=”Буквы”>
<input type=”text” name=”alfav” placeholder=”Буквы + цифры + знаки .,пробел”>
<input type=”submit” name=”otprav” value=”Отправить”>
</form>
<style>input { padding: 6px 9px; margin-bottom: 10px; width: 50%; display: block;} .in_format_bad { border: 1px solid red!important; } .in_format_good { border: 1px solid green!important; }</style>
В ней подписаны форматы полей, по которым и будем делать проверку. Теперь добавим функцию обработки полей на валидность, предупреждаю она может показаться сложной:
<script>
function in_format(selector, trim=false, requered=false, min=null, max=null, max_cl=false, format=null) {
//подфункция – добавляет к неправильно заполненному полю класс in_format_bad, а к правильному in_format_good
function in_format_action(in_rezult) {
if(in_rezult == ‘bad’) {$(selector).addClass(‘in_format_bad’); $(selector).removeClass(‘in_format_good’); }
if(in_rezult == ‘good’) {$(selector).removeClass(‘in_format_bad’); $(selector).addClass(‘in_format_good’); } }
//обрезка поля слева и справа от пробелов и переводов строк
if(trim == true) { $(selector).val($(selector).val().trim()); }
//проверяет заполненно ли обязательное поле
if(requered == true) { if($(selector).val().length == 0) { in_format_action(‘bad’); } else { in_format_action(‘good’); } }
//обрезает символы, которые больше максимально допустимого числа
if(max != null && max_cl == true) { var re = new RegExp(“(.{” + max + “}).{0,}”,”g”); $(selector).val($(selector).val().replace(re, ‘$1’)); }
//проверка на ввод минимального и максимального числа символов одновременно
if(min != null && max != null) { if($(selector).val().length >= min && $(selector).val().length <= max) { in_format_action(‘good’); } else { in_format_action(‘bad’); } }
else {
if(min != null) { if($(selector).val().length < min) { in_format_action(‘bad’); } else { in_format_action(‘good’); } } //проверка на ввод минимального числа символов
if(max != null) { if($(selector).val().length > max) { in_format_action(‘bad’); } else { in_format_action(‘good’); } } //проверка на ввод максимального числа символов
}
//регулярка – пропускает разрешенные символы
if(format != null) { var re_format = new RegExp(format,”g”); if ($(selector).val().match(re_format)) { $(selector).val($(selector).val().replace(re_format, ”)) ; } }
}
</script>
Данная функция проверки корректности заполнения input полей добавляет к неправильно заполненному полю класс in_format_bad, а к правильному in_format_good. Входные переменные:
- selector – селектор проверяемого input-а: [name=person_r_surname]
- trim – если true, то сначала обрезает все пробелы и переводов строк слева и справа в поле, а затем делает остальные проверки
- requered – если true, то проверяет заполнено ли поле
- min – если указан, то проверяет минимальное число символов, которое должно быть в поле
- max – если указан, то проверяет максимальное число символов, которое должно быть в поле
- max_cl – (работает только с параметром max) если true, то обрезает символы, которые больше максимально допустимого числа
- format – если указан, то какие символы можно передавать – регулярка, например: [^а-яА-Яa-zA-Z\,\.\s] – в регулярке символы, которые совпадают со спецсимволами надо экранировать – но при передаче в функцию пропадает – поэтому, чтобы получить пробел s надо писать \s (т.е. экранируем , чтобы он не исчез)
Теперь, как пользоваться функцией. Привожу рабочие примеры для этой формы:
<script>
$(document).ready(function(){
//Отправка формы
$(‘#forma_required’).on(“submit change blur”, function() { //чтобы проверять сразу надо поставить еще keyup, но тогда надо отказаться от trim – иначе обрезает пробелы в конце строк
//проверка нужных полей перед отправкой
in_format(‘[name=marka]’, true, true, 5, 10, true, null); //trim, обязательное, 5-10 символов, с обрезкой после 8 символов, любой формат
in_format(‘[name=color]’, true, true, 3, null, false, null); //trim, обязательное, от 3 символов, без обрезки, любой формат
in_format(‘[name=dviga]’, true, true, null, null, false, null); //trim, обязательное, без обрезки, любой формат
in_format(‘[name=cifri]’, true, true, null, null, false, ‘[^0-9]’); //trim, обязательное, без обрезки, только цифры
in_format(‘[name=bykvi]’, true, true, null, null, false, ‘[^а-яА-Яa-zA-Z\s]’); //trim, обязательное, без обрезки, только буквы
in_format(‘[name=alfav]’, true, true, null, null, false, ‘[^0-9а-яА-Яa-zA-Z’\.\,\”\-\s]’); //trim, обязательное, без обрезки, только буквы + знаки пробел
if ($(this).find(“.in_format_bad”).length > 0) { return false; } //отправка формы, если все Ок
});
});
</script>
Из этих примеров понятно, на какие случаи использовать какие данные, для подстановки в функцию. В качестве правил хорошего тона рекомендую пользователю подписывать требуемый формат ввода. Например, если на поле должны быть только цифры определенной длины, то укажите об этом в описании поля.
(Пока оценок нет)
Загрузка...