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

В этом разделе мы научимся обрабатывать данные, введенные пользователем в элементы формы. Обработка на стороне клиента позволит снизить нагрузку на сервер за счет отмены отправки данных формы при неправильно введенных значениях. Кроме того, в дальнейшем мы будем изучать технологию AJAX, которая позволяет отправлять данные без перезагрузки страницы. В этом случае заботиться о получении данных формы необходимо самим.

Текстовое поле и поле ввода пароля

Создадим форму ввода адреса электронной почты и пароля и проверим правильность ввода перед отправкой данных на сервер (листинг 8.1). Если данные введены неправильно, то

Листинг 8.1. Проверка правильности ввода почтового адреса и пароля

<!doctype html>
<html>
<head>
<title>Проверка правильности ввода E-mail и пароля</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":text,:password").css("background-color", "#ffffff");
   $("form").submit(function() {
      var pole1 = $("#pole1");
      var pole2 = $("#pole2");
      pole1.css("background-color", "#ffffff");
      pole2.css("background-color", "#ffffff");
      var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;
      if (!p.test(pole1.val())) {
         alert("Неверный адрес E-mail");
         pole1.css("background-color", "#ffe4e1").focus().select();
         return false;
      }
      p = /^[a-z0-9_\.\-]{6,16}$/i;
      if (!p.test(pole2.val())) {
         alert("Неверный пароль");
         pole2.css("background-color", "#ffe4e1").focus().select();
         return false;
      }
      var msg = "Вы ввели следующие данные:\n\n E-mail: ";
      msg += pole1.val() + "\n Пароль: " + pole2.val();
      alert(msg);
      return true;
   });
});
</script>
</head>
<body>
<form action="test.php" method="GET">
E-mail:<br>
<input type="text" name="pole1" id="pole1"><br>
Пароль:<br>
<input type="password" name="pole2" id="pole2"><br>
<input type="submit" value="Отправить">
</form>
</body>
</html>

В следующем примере (листинг 8.2) рассмотрим применение атрибутов readOnly и disabled. Создадим два текстовых поля и кнопку. Второе текстовое поле сделаем доступным только для чтения. Кроме того, изначально кнопка будет неактивна. При введении текста в первое поле кнопка становится активной, а сам текст копируется из первого поля во второе. Если щелкнуть на кнопке, то первое поле очищается и вызывается метод keyup(). За счет этого очищается второе поле, и кнопка деактивизируется. После кнопки добавим еще одно текстовое поле, в котором по умолчанию будет подсказка. При получении полем фокуса удаляем подсказку, а при потере фокуса, если поле осталось пустым, снова ее выводим.

Листинг 8.2. Атрибуты readOnly и disabled

<!doctype html>
<html>
<head>
<title>Атрибуты readOnly и disabled</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $(":text").css("background-color", "#ffffff");
   $("#pole2").attr("readonly", true);
   $("#btn1").attr("disabled", true);
   $("#pole1").keyup(function() {
      var pole1 = $("#pole1").val();
      var btn1 = $("#btn1");
      if (pole1.length == 0) {
         if (!btn1.is(":disabled")) btn1.attr("disabled", true);
      }
      else {
         if (btn1.is(":disabled")) btn1.removeAttr("disabled");
      }
      $("#pole2").val(pole1);
   });
   $("#btn1").click(function() {
      $("#pole1").val("").keyup();
   });
   $("#pole3").focus(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "[Подсказка]") pole3.val("");
   }).blur(function() {
      var pole3 = $("#pole3");
      if (pole3.val() == "") pole3.val("[Подсказка]");
   });
});
</script>
</head>
<body>
<input type="text" id="pole1"><br>
<input type="text" id="pole2"><br>
<input type="button" value="Очистить" id="btn1"><br><br>
<input type="text" id="pole3" value="[Подсказка]">
</body>
</html>
Предыдущая статья Все статьи Следующая статья