Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Основи мови JavaScript.doc
Скачиваний:
0
Добавлен:
01.07.2025
Размер:
1.04 Mб
Скачать

3.4. Перевірка заповнення форми

Для того щоб скоротити кількість обертань до розширення серверу Web, можна за допомогою сценарію JavaScript виконати локальну перевірку слушності заповнення форми. Як перевірити вміст окремих полів форми, уже відомо з попередніх поділів глави. Зараз же треба зупинитися на взаємодії форми, сценарію JavaScript і розширення серверу Web, такого, як програма CGI або додаток ISAPI.

З раніше розглянутих розширень серверу Web, що опрацьовують дані, отримані від форм відомо, що для посилки даних розширенню використовується кнопка типу submit. Ця кнопка вбудовується у форму в такий спосіб:

<INPUT TYPE="submit"

NАМЕ="Ім'я_кнопки_submit"

VALUE="Teкст_на_поверхні_кнопки"

onClick="Оброблювач_події">

Параметри NAME і VALUE тут мають таке ж призначення, що вони мають і для вивченої раніше кнопки твань button.

Оброблювач події onClick дозволяє сценарію JavaScript виконати опрацювання вмісту поляж форми, перед тим, як дані з цих полів будуть передані розширенню серверу Web.

На жаль, поза залежністю від результатів опрацювання дані з форми завжди передаються серверу Web. що не завжди зручно. Було б краще, якби сценарій JavaScript міг відмовитися від посилки цих даних, якщо вони введені користувачем із помилкою.

Найпростіший вихід із цієї ситуації - заміна кнопки типу submit на звичайну кнопку button. З цією кнопкою повинний бути пов'язаний сценарій JavaScript, що перевіряє даним, уведені користувачем у поля форми, і посилає їхньому серверу Web явно.

У цьому поділі приведені вихідні тексти документа HTML, призначеного для запровадження ідентифікатора користувача і пароля (листинг 3.7). Цей документ аналогічний приведеному в попередньому поділі. У прикладі за допомогою сценарію JavaScript не тільки проверяется пароль, але і відправляються дані розширенню серверу Web, якщо пароль уведений правильно.

Листинг 3.7. Файл chapter3/validation/validation. html

<HTML>

<HEAD>

<ТIТLЕ>Запровадження і перевірка пароля</ТIТLЕ>

<SCRIPT LANGUAGE="JavaScript">

<!--

function Complete()

{

if(Sel.pwd.value != Sel.pwdl.value)

alert("Помилка при запровадженні пароля\nПопробуйте ще разом");

else

{

var szld="";

var szPwd="";

szld = Sel.id.value;

szPwd = Sel.pwd.value;

alert("Реєстрація виконана: \n" + "ID=" + szld + "\nPassword=" + szPwd);

document.forms[0].submit();

}

}

//-->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<Н1>Реєстрація</Н1>

<FORM METHOD=POST NAME="Sel"

ACTION="http://frolov/scripts/controls .exe">

<TABLE>

<ТR><ТD><У>Ідентифікатор : </B></TD><TD>

<INPUT TYPE="text" NAME="id"

onChange="this. value=this. value. toUpperCase()"

SIZE="20" ></TD></TR>

<ТR><ТD><У>Пароль:</b></td><td><input TYPE="password" NAME="pwd" SIZE="20"></TD></TR>

<ТR><ТD><У>Перевірка пароля: </B></TD><TD><INPUT TYPE="password"

NAME="pwdl" SIZE="20"></TD></TR>

</TABLE>

<P>

<TABLE>

<TR><TD><INPUT TYPE="button" VALUE="Complete"

onClick="Complete();"></TD>

<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>

</TABLE>

</FORM>

</BODY>

</HTML>

При визначенні форми для оператора <FROM> ми зазначили параметр ACTION:

<FORM METHOD=POST NAME="Sel"

ACTION="http://frolov/scripts/controls. exe">

Цей параметр задає шлях до завантажувального файла програми CGI, розташованому в каталозі сценаріїв серверу Web. Такий каталог створюється адміністратором серверу Web. За допомогою спеціальної програми адміністратор указує права доступу до цього каталога, що дозволяють виконання розташованих там завантажувальних файлів CGI і бібліотек динамічного компонування DLL додатків ISAPI. Докладно з цим матеріалом можна познайомитися в останній главі.

Функція Complete, що визивається при натисканні на однойменну кнопку, перевіряє пароли, введені в полях pwd і pwdl. Якщо ці пароли збігаються, сценарій посилає дані серверу за допомогою методу submit. визначеного у формі:

document. forms [0]. submit();

Тут робиться обертання до первой (і єдиного) формі, визначеної в документі HTML.

Програма CGI з ім'ям control. ехе відображає отримані дані в динамічно утворюваному документі HTML.

У списку значень поляж, розташованому в нижній частині цього документа, знаходиться ідентифікатор і пароль користувача.

Вихідний текст програми CGI, із яким працює наш документ Html, показаний у листинге 3.8.

Листинr 3.8. Файл chapter3/validation/controls/controls. c

// ==============================================

// Програма CGI controls.с

//Одержання даних від форми і їхнє відображення в документі HTML,

//утворюваному динамічно

//

// (С) Фролов А.В., 1997, 1998

// E-mail: frolov@glas.apc.org

// WWW: http://www.glasnet.ru/~frolov

// або

// http://www.dials-ccas.ru/frolov

#include <stdio.h>

#include <stdlib.h>

#include <string.h>

//Прототипи функцій перекодування

void DecodeStr(char *szString);

char DecodeHex(char *str);

//----------------------------------------------------

// Функція main

// Точка входу програми CGI

// ---------------------------------------------------

void main(int argc, char *argv[])

{

int lSize;

FILE * fileReceived;

char * szMethod;

char szBuf[8196];

char szSrcBuf[8196] ;

char * szPtr;

char * szParam;

// Висновок заголовка HTTP і розділювального рядка

printf("Content-type: text/html\n\n");

// Висновок початкового фрагмента документа HTML,

// формованого динамічно

printf("<!DOCTYPE HTML PUBLIC"

" \"-//W3C//DTD HTML 3.2//EN\">");

printf("<HTML><HEAD><TITLE>User Registration"

"</TITLE></HEAD><BODY BGCOLOR=#FFFFFF>");

// Визначаємо метод передачі даних

szMethod = getenv("REQUEST_METHOD");

// Опрацювання методу POST

if(!strcmp(szMethod, "POST"))

// Визначаємо розмір даних, отриманих від браузера

// при передачі даних із полів форми

lSize = atoi(getenv("CONTENT_LENGTH"));

// Читаємо ці дані в буфер szBuf із

// стандартного потоку запровадження STDIN

fread(szBuf, lSize, l, stdin);

// Створюємо файл, у який будуть записані

// прийняті дані

fileReceived = fopen("received.dat", "w");

// Виконуємо запис прийнятих даних

fwrite(szBuf, lSize, l, fileReceived);

// Закриваємо файл прийнятих даних

fclose(fileReceived);

// Відображаємо значення деякий переменных середовища

printf("<Н2>Перемінне середовище</Н2>");

// Метод доступу

printf("REQUEST_METHOD = %s", getenv("REQUEST_METHOD"));

// Розмір отриманих даних у байтах

printf("<BR>CONTENT_LENGTH = %ld", ISize);

// Тип отриманих даних

printf("<BR>CONTENT_TYPE = %s", getenv("CONTENT_TYPE"));

// Закриваємо буфер даних двоичным нулем,

// перетворюючи його в такий спосіб у рядок

szBuf[lSize] = '\0';

// Робимо копію прийнятих даних у буфер

szSrcBuf strcpy(szSrcBuf, szBuf);

// Відображаємо прийняті дані без опрацювання

printf("<Н2>Прийняті дані</Н2>");

printf("<P>%s", szSrcBuf);

// Виконуємо перекодування прийнятих даних

DecodeStr(szSrcBuf);

// Відображаємо результат перекодування

printf("<Н2>Дані після перекодування</Н2>");

printf("<P>%s", szSrcBuf);

// Выводим список значень поляж форми

printf("<Н2>Список значень поляж</Н2>");

// Дописуємо в кінець буфера прийнятих даних

// символ &, що використовується в якості

// роздільника значень поляж

szBuf[lSize] = '&';

szBuf[lSize + 1] = '\0';

// Цикл по полях форми

for(szParam = szBuf;;)

{

// Ищем черговий разделитель

szPtr = strchr(szParam, '&');

// Якщо він знайдений, раскодируем рядок параметрів

if(szPtr != NULL)

{

*szPtr = '\0' ;

DecodeStr(szParam);

// Выводим у документ значення параметра

printf("%s<BR>", szParam);

// Переходимо до такого параметра

szParam = szPtr + 1;

// Якщо досягнутий кінець буфера, завершуємо цикл

if(szParam >= (szBuf + lSize))

break;

}

else

break;

}

// Выводим завершальний фрагмент документа HTML

printf("</BODY></HTML>");

return;

}

}

// ----------------------------------------------------------------

// Функція DecodeStr

// Раскодирование рядка з кодировки URL

void DecodeStr(char *szString)

{

int src;

int dst;

char ch;

// Цикл по рядку

for(src=0, dst=0; szString[src]; src++, dst++)

{

// Одержуємо черговий символ перекодирует рядка

ch = szString[src];

// Заміняємо символ "+" на прогалину

ch = (ch =='+') ? ' ' : ch;

// Сохраняем результат

szString[dst] = ch;

// Опрацювання шестнадцатеричных кодів виду "%хх"

if(ch == '%')

{

// Виконуємо перетворення рядка "%хх"

// у код символу

szString[dst] = DecodeHex(&szString[src + 1]);

src += 2;

}

}

// Закриваємо рядок двоичным нулем

szString[dst] = '\0';

// ------------------------------------------------------------

// Функція DecodeHex

// Раскодирование рядка "%хх"

char DecodeHex(char *str)

{

char ch;

// Опрацьовуємо старший розряд

if(str[O] >= 'A')

ch = ((str[0] & Oxdf) - 'A') + 10;

else

ch = str[O] - '0';

// Зрушуємо його вліво на 4 бита

ch <<= 4;

// Опрацьовуємо молодший розряд і складаємо

// його зі старшим

if(str[1] >= 'A')

ch += ((str[1] & Oxdf) - 'А') + 10;

else

ch += str[l] - '0';

// Повертаємо результат перекодування

return ch;

}

Це спрощений варіант програми CGI, що описана в попередніх главах. .