Оглавление

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

Проверка правильности ввода E-mail и пароля. Получение данных из элемента формы


Текстовое поле и поле для ввода пароля имеют одинаковые свойства:
□  value — значение элемента формы;
□  defauitvalue — начальное значение, заданное параметром value;
□  disabled — запрет элемента формы: если задано значение true, то поле является неактивным (отображается серым цветом);
□   form — ссылка на форму, в которой находится элемент;

□  maxLength — максимальное количество символов, которое может быть введено в поле;
□  name — имя элемента;
□  type — тип элемента формы;
□  readonly — запрет редактирования: если задано значение true, текст в поле нельзя редактировать, если false — можно.

 

Методы тоже одинаковы:
□  blur() убирает фокус ввода с текущего элемента формы;
□  focus() помещает фокус на текущий элемент формы;
□  select() выделяет текст в поле.

 

Обоими элементами поддерживаются следующие события:
□  onblur происходит при потере фокуса элементом формы;
□  onchange наступает после изменения данных в поле, при переводе фокуса ввода на другой элемент либо при отправке данных формы. Наступает перед событием onblur;
□  onfocus возникает при получении фокуса ввода элементом формы.

 

Кроме перечисленных событий можно использовать стандартные события мыши и клавиатуры (см. разд. 16.2 и 16.3).
В качестве примера рассмотрим форму ввода E-mail и пароля с проверкой правильности ввода (листинг 67). Если данные введены неправильно, то при отправке формы:
□  поле выделяется розовым цветом;
□  текст в поле выделяется;
□  выводится сообщение об ошибке;
□  отправка формы прерывается.

 

Поле Повтор E-mail запрещено для редактирования. При вводе адреса электронной почты данные автоматически копируются из поля E-mail в поле Повтор E-mail.

 

Листинг 67. Форма ввода E-mail и пароля с проверкой правильности ввода

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Пример использования текстовых полей</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_submit() {
   var pole1 = document.getElementById("pole1");
   var pole2 = document.getElementById("pole2");
   pole1.style.backgroundColor = "#FFFFFF";
   pole2.style.backgroundColor = "#FFFFFF";
   var p = /^[a-z0-9_\.\-]+@([a-z0-9\-]+\.)+[a-z]{2,6}$/i;
   var Str = pole1.value;
   if (!p.test(Str)) {
      window.alert("Неверный адрес E-mail");
      pole1.style.backgroundColor = "#FFE4E1";
      pole1.select();
      return false;
   }
   p = /^[a-z0-9_\.\-]{6,16}$/i;
   Str = pole2.value;
   if (!p.test(Str)) {
      window.alert("Неверный пароль");
      pole2.style.backgroundColor = "#FFE4E1";
      pole2.select();
      return false;
   }
   var msg = "Вы ввели следующие данные:\n\n E-mail: ";
   msg += pole1.value + "\n Пароль: " + pole2.value;
   window.alert(msg);
   return true;
}
function f_reset() {
   document.getElementById("pole1").style.backgroundColor = "#FFFFFF";
   document.getElementById("pole2").style.backgroundColor = "#FFFFFF";
}
function f_load() {
   document.getElementById("pole3").readOnly = true;
}
function f_keyup() {
   document.getElementById("pole3").value = 
        document.getElementById("pole1").value;
}
//-->
</script>
</head>
<body onload="f_load();">
 <form action="test.php" method="GET" name="frm" id="frm"
  onsubmit="return f_submit();" onreset="f_reset();">
  <div>
  E-mail:<br>
  <input type="text" name="pole1" id="pole1" 
  style="background-color: #FFFFFF" onkeyup="f_keyup();"><br>
  Повтор E-mail:<br>
  <input type="text" name="pole3" id="pole3" 
  style="background-color: #FFFFFF"><br>
  Пароль:<br>
  <input type="password" name="pole2" id="pole2" 
  style="background-color: #FFFFFF"><br>
  <input type="reset" value="Очистить"> 
  <input type="submit" value="Отправить">
  </div>
 </form>
</body>
</html>

 

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити