IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

 IZONE 


Проверка данных в формах. Часть 2

Довольно часто возникает необходимость проверки, правильно ли заполнена форма, не осталось-ли пустых полей. Конечно, это можно сделать на стороне сервера, но это отнимает некоторое время. Сегодня рассмотрим способ как осуществить проверку на локальной машине с помощью JavaScript.

Для начала рассмотрим основные принципы организации выполнения каких-либо действий при нажатии на кнопку отправки формы (Submit button). Предположим, что у нас имеется форма, в которой еще не реализована проверка:

Имя:

e-mail:


<FORM NAME="test1" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали">
</FORM>

Для того, чтобы перед тем, как данные формы были отправлены на сервер, были произведены некоторые действия необходимо переписать последний элемент ввода следующим образом:

<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">

Функция checkIt() должна возвратить значение true, если все в порядке и false если данные не прошли проверку. Причем, необходимо обратить внимание на сопособ вызова этой функции в обработчике событий. Значение, выданное, функцией должно быть передано обратно в обработчик, чтобы стандартная процедура оптправки данных была выполнена.

Теперь рассмотрим, как мы можем получить доступ к полям формы из скрипта. Для этого используется массив document.forms.formName. Доступ к полям может быть осуществлен несколькими способами: по имени поля (атрибут NAME) - document.forms.test1.user или document.forms.test1["user"], по индексу - document.forms.test1[0]. Каждое поле имеет свойство value, которое содержит введенное значение.

Исходя из вышеизложенного, реализация процедуры проверки нашей формы может выглядеть так:

function checkIt() {
   if (document.forms.test2.user.value != "") {
      return true; // все отлично
   } else {
      alert("Поле 'имя' должно быть заполнено!");
  return false;
   }
}

А форма будет выглядеть следующим образом:

<FORM NAME="test2" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">
</FORM>

Имя:

e-mail:


 

Источник: http://exper.ural.ru/

 


Copyright © "Internet Zone"info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас.