cpp

Обработка данных формы

В этом разделе мы научимся обрабатывать данные, введенные пользователем в элементы формы. Обработка на стороне клиента позволит снизить нагрузку на сервер за счет отмены отправки данных формы при неправильно введенных значениях. Кроме того, в дальнейшем мы будем изучать технологию 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>

Учебник по jQuery и AJAX
Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов

cpp