PHP SQL
PHP SQL .ru
  Главная  Уроки  PHP  MySQL  jQuery  RegEx  CSS  Книги  Форум  
 Функции


  На главную

  Назад  Вперед

  Печать

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

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

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

<html>
<head>
<title>Проверка правильности ввода E-mail и пароля</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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_.-][email protected]([a-z0-9-]+.)+[a-z]{2,4}$/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 = "Вы ввели следующие данные:

 E-mail: ";
      msg += pole1.val() + "
 Пароль: " + 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

<html>
<head>
<title>Атрибуты readOnly и disabled</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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>

 
Предыдущая   На главную   Следующая          

Ваш комментарий:

'

Реклама на сайте | Обмен ссылками | Ссылки | Контакты
Добавить статью | Добавить исходник
2010-2014 © phpsql.ru