Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Обработка данных формы
В этом разделе мы научимся обрабатывать данные, введенные пользователем в элементы формы. Обработка на стороне клиента позволит снизить нагрузку на сервер за счет отмены отправки данных формы при неправильно введенных значениях. Кроме того, в дальнейшем мы будем изучать технологию AJAX, которая позволяет отправлять данные без перезагрузки страницы. В этом случае заботиться о получении данных формы необходимо самим.
Текстовое поле и поле ввода пароля
Создадим форму ввода адреса электронной почты и пароля и проверим правильность ввода перед отправкой данных на сервер (листинг 1.20). Если данные введены неправильно, то:
- к полю добавляется стилевой класс
is-invalid
; - поле выделяется розовым цветом;
- ниже поля отображается сообщение об ошибке;
- отправка формы прерывается.
Листинг 1.20. Проверка правильности ввода почтового адреса и пароля
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Проверка правильности ввода E-mail и пароля</title>
</head>
<body>
<div class="container my-3">
<form action="#" method="GET" id="frm">
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" class="form-control"
name="email" id="email" placeholder="Введите E-mail">
<div class="invalid-feedback">
Неверный адрес E-mail
</div>
</div>
<div class="form-group">
<label for="passwd">Пароль:</label>
<input type="password" class="form-control"
name="passwd" id="passwd" placeholder="Введите пароль">
<small class="form-text text-muted">От 6 до 16 символов</small>
<div class="invalid-feedback">
Неверный пароль
</div>
</div>
<button type="submit" class="btn btn-primary">Отправить</button>
</form>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#email, #passwd')
.css('background-color', '#ffffff')
.focus( function() {
$(this).removeClass('is-invalid')
.css('background-color', '#ffffff');
});
$('#frm').submit( function() {
var email = $('#email');
var passwd = $('#passwd');
var p = /^[a-z0-9_.-]+@([a-z0-9-]+\.)+[a-z]{2,6}$/i;
if ( !p.test( email.val() ) ) {
email.addClass('is-invalid')
.css('background-color', '#ffe4e1');
return false;
}
p = /^[a-z0-9_.-]{6,16}$/i;
if ( !p.test( passwd.val() ) ) {
passwd.addClass('is-invalid')
.css('background-color', '#ffe4e1');
return false;
}
var msg = 'Вы ввели следующие данные:\n\n E-mail: ';
msg += email.val() + '\n Пароль: ' + passwd.val();
window.alert(msg);
return true;
});
});
</script>
</body>
</html>
В следующем примере (листинг 1.21) рассмотрим применение свойств readOnly
и disabled
. Создадим два текстовых поля и кнопку. Второе текстовое поле сделаем доступным только для чтения. Кроме того, изначально кнопка будет недоступна. При вводе текста в первое поле кнопка становится активной, а сам текст копируется из первого поля во второе. Если щелкнуть на кнопке, то первое поле очищается и вызывается метод keyup()
. За счет этого очищается второе поле, и кнопка становится недоступной. После кнопки добавим еще одно текстовое поле, в котором по умолчанию будет подсказка. При получении полем фокуса удаляем подсказку, а при потере фокуса, если поле осталось пустым, снова ее выводим.
Листинг 1.21. Свойства readOnly
и disabled
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>Свойства readOnly и disabled</title>
</head>
<body>
<div class="container my-3">
<input type="text" class="form-control mb-2" id="txt1">
<input type="text" class="form-control mb-2" id="txt2">
<button type="button" class="btn btn-primary"
id="btn1">Очистить</button>
<input type="text" class="form-control mt-5" id="txt3"
value="[Подсказка]">
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function() {
$('#txt2').prop('readOnly', true);
$('#btn1').prop('disabled', true);
$('#txt1').keyup( function() {
var txt1_val = $('#txt1').val();
var btn1 = $('#btn1');
if ( txt1_val.length === 0 ) {
if ( !btn1.is(':disabled') )
btn1.prop('disabled', true);
}
else {
if ( btn1.prop('disabled') )
btn1.prop('disabled', false);
}
$('#txt2').val(txt1_val);
});
$('#btn1').click( function() {
$('#txt1').val('').keyup();
});
$('#txt3')
.focus( function() {
var txt3 = $('#txt3');
if ( txt3.val() === '[Подсказка]' ) txt3.val('');
})
.blur( function() {
var txt3 = $('#txt3');
if (txt3.val() === '') txt3.val('[Подсказка]');
});
});
</script>
</body>
</html>
Реквизиты
ЮMoney: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов