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

Как мы знаем форма создается с помощью контейнерного тега <FORM>, внутри которого располагаются теги элементов пользовательского интерфейса – поля ввода данных, текстовые области, переключатели и флажки, раскрывающиеся списки и кнопки. В объектной модели документа каждой форме соответствует свой объект, входящий в коллекцию forms. Форма служит для приема данных от посетителя и отправки их серверной программе. Для отправки данных на сервер сценарий не обязателен. Чтобы отправить данные, достаточно в теге <FORM> атрибуту ACTION присвоить значение URL-адреса получателя, а всамой форме разместить кнопку типа Отправить (submit). Щелчок на этой кнопке инициализирует отправку данных. Если атрибут ACTION не указан или его значение пусто, данные формы не будут отправлены.

Внимание! Вместо обычной кнопки типа submit(<input type=submit>) можно использовать графическое изображение:

<input type=image src="адрес_ файла">

Атрибут ACTION должен иметь URL-адрес файла или программы, которая получает и обрабатывает отправленные данные.

ACTION="http://www.narod.ru/guestbook/?
owner=sevidi&mainhtml=short.txt&messageshtml=sm.txt"

Если потребуется отправить данные формы по электронной почте, то значением ACTION является строка вида:

mailto: адрес_e-mail

Можно также указать тему(subject) сообщения:

mailto: адрес_e-mail?subject =тема_сообщения

Кроме атрибута ACTION в теге <FORM> следует указать еще два атрибута: METHOD и ENCTYPE. Атрибут METHOD имеет значение POST или GET. При использовании метода GET передаваемые данные видны в адресной строке браузера и следуют за адресом. Обычно этот метод используется для передачи небольшого объема данных. Если у вас нет особых причин задуматься об этом, выбирайте значение POST. Атрибуту ENCTYPE присвойте значение "text/plain". В этом случае отправляемое сообщение будет представлять собой последовательность пар вида

имя_элемента=значение

Здесь имя_элемента – значение атрибута NAME в теге элемента, содержащегося в форме, а значение – значение атрибута VALUE в этом же теге. Если не указать ENCTYPE, то сообщение будет представлено в неудобочитаемом (закодированном) виде.

Если перед отправкой данных формы требуется предварительно их проверить, то для этого необходим сценарий. Рассмотрим пример, в котором проверяется наличие символа @ в поле ввода адреса электронной почты получателя и заполнено ли поле ввода сообщения(Введите Ваше имя).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Отправка данных по E-mail</title>
<script type="text/javascript">
 <!-- Скрыть

function test1(form) {
if (form.text1.value == "")
alert("Пожалуйста, введите строку!")
else {
alert(form.text1.value+"! Форма заполнена корректно!");
}
}

function test2(form) {
if (form.text2.value == "" ||
form.text2.value.indexOf('@', 0) == -1)
alert("Неверно введен адрес e-mail!");
else alert("OK!");
}
// -->

</script>

</head>

<body>
<form name="first">
Введите Ваше имя:<br>
<input type="text" name="text1">
<input type="button" name="button1" value="Проверка" onClick="test1(this.form)">
<P>
Введите Ваш адрес e-mail:<br>
<input type="text" name="text2">
<input type="button" name="button2" value="Проверка" onClick="test2(this.form)">
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Здесь мы создали два элемента для ввода текста и две кнопки. Кнопки вызывают функции test1() или test2(), в зависимости от того, которая из них была нажата. В качестве аргумента к этим функциям мы передаем комбинацию this.form, что позже позволит нам адресоваться в самой функции именно к тем элементам, которые нам нужны. Функция test1(form) проверяет, является ли данная строка пустой. Это делается посредством if (form.text1.value = = "")... . Здесь 'form' - это переменная, куда заносится значение, полученное при вызове функции от 'this.form'. Мы можем извлечь строку, введенную в рассматриваемый элемент, если к form.text1 припишем 'value'. Чтобы убедиться, что строка не является пустой, мы сравниваем ее с "". Если же окажется, что введенная строка соответствует "", то это значит, что на самом деле ничего введено не было. И наш пользователь получит сообщение об ошибке. Если же что-то было введено верно, пользователь получит подтверждение - ОК.

Пользователь может вписать в поле формы одни пробелы. И это будет принято, как корректно введенная информация! Рассмотрим теперь функцию test2(form). Здесь вновь сравнивается введенная строка с пустой - "" (чтобы удостовериться, что что-то действительно было введено пользователем). Однако к команде if мы добавили еще кое-чего. Комбинация символов || называется оператором OR (ИЛИ). Команда if проверяет, чем заканчивается первое или второе сравнения. Если хотя бы одно из них выполняется, то и в целом команда if имеет результатом true, а стало быть будет выполняться следующая команда скрипта. Словом, мы получим сообщение об ошибке, если либо предоставленная нами строка пуста, либо в ней отсутствует символ @. Второй оператор в команде if следит за тем, чтобы введенная строка содержала @.

А теперь предположим, что для регистрации на сервере пользователь должен внести свое имя и адрес электронной почты. По условиям регистрации все поля обязательно должны быть заполнены. Напишем сценарий проверяющий корректность данных, и включим его в состав веб-страницы. После того как пользователь введет требуемые данные и щелкнет на кнопке Зарегистрироваться, обработчик события, входящий в состав сценария, должен получить управление и определить, правильно ли пользователь ввел требуемые данные. Если претензий к введенной информации нет, управление должно быть передано встроенному обработчику событий, связанного с формой. Этот обработчик и сгенерирует запрос к серверу.

Рассмотрим исходный текст HTML-документа, реализующего данную форму и содержащий сценарий для проверки введенных данных.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Проверка введенных данных</title>

</head>

<body>

<h2 align="center">Для регистрации сообщите краткие сведения о себе</h2>
<form name="register" action="" method="get" onSubmit="return validate()">
<table border="0">
<tr>
<td>Имя:</td>
<td><input type="text" name="fname" size="20"></td>
</tr>
<tr>
<td>Фамилия:</td>
<td><input type="text" name="lname" size="20"></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="email" size="30"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Зарегистрироваться"></td>
</tr>
</table>
</form>
<script language="JavaScript">
function validate() {
if(document.register.fname.value.length==0){
alert('Поле "Имя" не должно оставаться пустым');
return false;
}
if(document.register.lname.value.length==0){
alert('Поле "Фамилия" не должно оставаться пустым');
return false;
}

if(document.register.email.value.length==0){
alert('Поле "E-mail" не должно оставаться пустым');
return false;
}
index1=document.register.email.value.indexOf("@");
index2=document.register.email.value.lastIndexOf("@");
if((index1<=0)||(index1!=index2)||((document.register.email.value.length-index1)<3))
{
alert('Значение, введенное в поле "E-mail", \n не является почтовым адресом');
return false;
}
return true
}
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Между дескрипторами <FORM> и </FORM>, реализующих интерактивные элементы, содержится также и описание таблицы. Таблица нужна лишь для того, чтобы осуществлять выравнивание полей ввода. Альтернативой таблицы могли бы служить неразрывные пробелы &nbsp, однако большое количество таких символов врыд ли улучшило бы восприятие исходного кода документа.

Все операции, связанные с проверкой данных, сосредоточены в теле функции validate(). Обратите внимание на то, какое событие обрабатывает функция validate(). Поскольку проверять правильность ввода данных надо в ответ на щелчок мыши на кнопке Зарегистрироваться, то может создаться впечатление, что функция validate() должна вызываться на событие onClick, связанное с кнопкой. Однако никакие действия сценария, относящиеся к обработке события onClick, не могут помешать браузеру передать данные на сервер. Поэтому проверка корректности введенной информации выполняется при наступлении события onSubmit формы. Если обработчик onSubmit возвращает значение false, данные на сервер не передаются. Если же в результате обработки возвращается значение true, форма действует обычным образом, т.е. формирует запрос серверу и пересылает ему информацию, введенную пользователем.

При обработке события onSubmit возвращаемое значение true интерпретируется так: данные введены правильно и могут быть переданы на сервер. Поэтому, чтобы исключить передачу некорректной информации, обработчик должен вернуть значение false.

Чтобы упростить обращение к интерактивным элементам формы, им также, как и самой форме, присваиваются имена. Принимая во внимание тот факт, что свойство value объекта Text (или объекта Element) представляют собой объект String, становится понятным смысл следующих проверок:

if(document.register.fname.value.length = = 0)

. . .

if(document.register.lname.value.length = = 0)

. . .

if(document.register.email.value.length = = 0)

. . .

Сценарий проверяет, не оставил ли пользователь незаполненным одно из полей: Имя, Фамилия, E-mail, и если это произошло, вызывает метод alert() текущего окна. При вызове этого метода на экран выводится окно с предупреждающим сообщением, переданным методу в качестве параметра.

Приведенный ниже фрагмент кода проверяет, является ли введенная строка почтовым адресом. Поскольку в составе адреса электронной почты обязательно должен присутствовать символ "@", то проверка корректности адреса в основном сводится к проверке расположения этого символа.

index1=document.register.email.value.indexOf("@");
index2=document.register.email.value.lastIndexOf("@");
if((index1<=0)||(index1!=index2)||((document.register.email.value.length-index1)<3))
{
alert('Значение, введенное в поле "E-mail", \n не является почтовым адресом');
return false;
}

Дополнительную проверку корректности почтового адреса можно было бы осуществить, выделяя часть строки, которая следует за последней точкой после символа @(или, если точка отсутствует, за самим символом @), и сравнивая ее с допустимыми значениями доменов верхнего уровня(ru, com, net и т.д.). Однако такая проверка существенно увеличила бы исходный текст сценария и в тоже время не имела бы никакого отношения к использованию объектов JavaScript.

На этом мы заканчиваем изучение JavaScript, но это совсем не значит, что возможности данного языка исчерпываются средствами , рассмотренными в разделе. После получения элементарного понятия о сценариях, мы можем двигаться дальше – рассмотреть вопросы веб-программирования выполняемые на сервере.



  • Другие |
назадвверхвперед
Rambler's Top100