<< Пред. стр.

стр. 41
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

font-size: 12px;
font-weight: bold;
font-transform: uppercase;




</style>
</head>


<body>


<form>
<table cellpadding="10">
<tr valign="top">
<td>
<textarea cols="50" rows="5" class="textfields">Type text
here. You'll be glad you did.</textarea>'
</td>
<td>
382 Строим Web-сайты

<input type="text" class="textfields" size="50" value="Nc,
type text here instead. ">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Submit" class="buttons"x/td>
</tr>
</table>
</form>


</body> .



изменение цвета и границы
CSS-атрибуты color и background-color позволяют изменять основной цвет и цвет
фона в текстовых элементах управления, примеры которых показаны на рисунке 69.2.
Можно также изменять границы кнопок с помощью атрибутов border-color, bor-
der-width и b o r d e r - s t y l e .
Листинг 69.2. Исходный код страницы, вид которой в браузере
показан на рисунке 69.2
<head>
<style type="text/css">


.listsmenu {
color: #FFFFFF;
background-color: #000000;



.buttons {
background-color: #000000;
color: #FFFFFF;
border-color: #999999;
border-width: 6px;
border-style: double;
font-weight: bold;
ГЛАВА 69. Применение стилей к текстовым элементам управления 383




</style>
</head>


<body>


<form>
<table cellpadding="10">
<tr valign="top">
<tdxselect name = "select" size="5" class="listsmenus">
<option value="l" selected>List Option l</option>
<option value="2">List Option 2</option>
<option value="3">List Option 3</option>
<option value="4">List Option 4</option>
<option value="5">List Option 5</option>
</selectx/td>
<tdxselect name="select" class="listsmenus">
<option value="l" selected>Menu Option l</option>
<option value="2">Menu Option 2</option>
<option value="3">Menu Option 3</option>
<option value="4">Menu Option 4</option>
<option value="5">Menu Option 5</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center"xinput type="submit
class = "buttons" value="Submit"x/td>
</tr>
</table>
</form>


</body>
384 Строим Web-сайты




Puc. 69.2. Используйте атрибуты color и background-color,
чтобы изменить в текстовом элементе управления основной цвет и цвет фона
ГЛАВА 70.
Проверка достоверности
входных данных формы
обработки данных формы необходимы серверные сценарии, чтобы прос-
ХОТЯ ДЛЯ
мотреть введенные посетителем данные до их отправки на Web-сервер, можно вос-
пользоваться старым добрым клиентским кодом. Этот процесс называется провер-
кой достоверности (validation) и пригоден для форм большинства типов.
Прогон проверки на достоверность помогает предотвратить ошибки, как умышлен-
ные, так и случайные, которые могут вызвать сбои или отказы в работе серверных
программ, получающих, в конечном счете, данные формы. Допустим, ваша форма со-
держит запрос посетителю на предоставление его адреса электронной почты с тем,
чтобы серверный обработчик формы мог отправить электронное сообщение с под-
тверждением. Очевидно, необходимо, чтобы посетитель предоставил свой адрес
электронной почты, иначе серверная программа не будет работать корректно. Если
кто-нибудь из посетителей попытается оставить поле пустым или попробует ввести
что-нибудь отличное от адреса электронной почты, сценарий проверки на достовер-
ность зафиксирует это и выведет запрос на исправление. Конечно, посетитель может
повторно ввести недостоверный адрес электронной почты, тем не менее, сценарий
проверки на достоверность, по крайней мере, отсечет немалую часть потенциально
неправильных данных.



Определение
Проверка достоверности (validating) входных данных формы озна-
чает их просмотр на правильность до отправки на Web-сервер.



Любой сценарий проверки на достоверность должен тесно координировать со
структурой формы. И поскольку никакие две формы не похожи друг на друга, не су-
ществует такого понятия, как универсальный, пригодный для всех случаев сценарий
проверки на достоверность. По этой причине разделы инструментария данной гла-
вы не похожи на другие подобные разделы этой книги, потому что их недостаточно
просто скопировать на свой Web-сайт. Вместо этого следует начать со «Структуры
сценария проверки достоверности», а затем выбрать код из подходящего раздела
инструментария, добавив требуемые функции проверки на достоверность для своей
конкретной формы.
Строим Web-сайты
386

Инструментарий Структура сценария проверки достоверности
Данный инструментарий содержит структуру сценария провер-
ки достоверности формы. Сам по себе он ничего не проверяет -
для этого необходимо добавить другие блоки кода. Другие
инструментарии в этой главе предоставляют действующие про-
цедуры проверки на достоверность. Выберите необходимые
процедуры и добавьте их в эту структуру.
<script language="JavaScript">
/* Если этот сценарий добавляется во внешний файл
J a v a S c r i p t , теги < s c r i p t > , вставленные в начале: и
в конце данного списка, не нужны. Если сценарий
вставляется в код Web-страницы, убедитесь, что это
та самая страница, которая содержит форму */
function validateFormf) {
/* Здесь добавьте компоненты из других инструмен-
тариев */
return true;
/* Предполагая, что данные формы прошли все провер-
ки на достоверность, приведенная выше команда пред-
писывает браузеру перейти к передаче формы на Web-
сервер. */


</script>
Помимо данной структуры, для функции проверки на достовер-
ность требуется еще один компонент: форма, которая при ее
отправке запускает сценарий. Добавьте событие onSubmit в тег
<f orm> в соответствии со следующим кодом:
<form name="formname" action="formaction" method=
"formmethod"> onSubmit="return validateFormf);">
Конечно, следует вставить соответствующие значения в атрибу-
ты name, a c t i o n и method для конкретной формы.


Инструментарий Проверка адреса электронной почты
Добавьте данный блок кода в сценарий проверки на достоиер-
ность, чтобы контролировать ввод посетителем адреса элект-
ронной почты в текстовое поле:
var email * new String(document.formname.
textfieldname.value);
/* В приведенную выше строку кода вставьте имя фор-
мы и имя текстового поля, которое содержит адрес
электронной почты. Этот оператор создает перемен-
ную с именем "email" для хранения данных, вводимых
посетителем в текстовое поле. */
387
ГЛАВА 70. Проверка достоверности входных данных формы

if (email.indexOf == -1) {
/* !Приведенный выше" оператор проверяет наличие в
поле знака "@". Если этот знак отсутствует, сцена-
рием проверки на достоверность предполагается, что
введенная посетителем строка не является адресом
электронной почты. */
alert("Необходимо ввести правильный адрес элект-
ронной почты.");
/* Приведенный выше оператор отображает сообщение
об. ошибке в открывающемся окне. */
document.formname.textfieldname.select();
/* Приведенный выше оператор выделяет на форме по-
ле электронной почты. */
return false;
/* Приведенный выше оператор отменяет передачу фор-
мы. */



Инструментарий Проверка требуемых текстовых полей
Добавьте данный блок кода в сценарий проверки на достовер-
ность, чтобы проверить заполнение посетителем всех требуе-
мых текстовых полей. Данный «Инструментарий» работает так-
же с полями паролей и текстовыми областями:
= new String(document.formname.
var fieldOl
requiredfieldOl.value);
new String(document.formname.
var fieldO2
requiredfieldO2.value)
= new String(document.formname,
var f ieldO3
requiredfieldO3.value);
fieldO4 = new String(document.formname
var
requiredfieldO4.value);
String(document.formname
var fieldO5 = new
requiredfieldO5.value);
/* Приведенные выше операторы создают переменные
для каждого требуемого текстового поля на форме.
Если число текстовых полей меньше пяти, опустите
ненужные строки кода. Если количество текстовых по-
лей равно или больше шести, просто добавьте в сце-
нарий строки кода, используя приведенный код в ка-
честве шаблона. */
var pass = true;
Строим Web-сайгы
388

/* Приведенная выше строка кода создает логическую
(true/false) переменную с именем "pass" и присваи-
вает ей значение "true". */
/* Приведенные ниже блоки кода if/then проверяют,
заполнены ли посетителем все требуемые текстовые
поля. Если сценарий определяет пропущенное поле,
переменная pass принимает значение false. Для каж-
дого текстового поля> необходим один блок кеда
if/then, поэтому настройте их в соответствии :
конкретной формой, удаляя ненужные блоки или добав-
ляя дополнительные блоки кода. */
if (fieldOl.length == 0) {
pass. = false;


if (fieldO2.length == 01
pass = false;


if -(fieldO3 .length == 0)
pass = false;


if (fieldO4.length == 0) {
pass = false;


if (fieldO5.length == 0) {
pass = false;


/* Следующий блок кода проверяет значение перемен-
ной pass. Если значение переменной pass равно
false, это свидетельствует о том, что, по крайней
мере, одно требуемое текстовое поле является пус-
тым. В этом случае браузер выводит сообщение об
ошибке и останавливает передачу формы. */
if (pass == false) {
alert("Следует заполнить все требуемые поля.");
return false;
ГЛАВА 70. Проверка достоверности входных данных формы 389

Инструментарий Проверка требуемых списков и меню
Добавьте данный блок кода в сценарий проверки на достовер-
ность, чтобы проверить заполнение посетителем всех требуе-
мых списков и меню.
Предполагается, что список или меню начинается с предвари-
тельно выбранного стандартного пункта, задаваемого аналогич-
но следующему примеру:
<option selected>Bbi6epi4Te nyHKT...</option>
Текст «Выберите пункт...», заключенный между тегами
<option>, можно изменять в соответствии с требованиями
конкретной формы. Просто убедитесь, что вы изменили также
текст в следующем коде:
var listOl = document.formname.requiredlistOl;
var listOlText = listOl.options[listOl.
selectedlndex].text;
var listO2 = document.formname.requiredlistO2;
var listO2Text = listO2.options[listO2.
selectedlndex].text;
var listO3 = document.formname.requiredlistO3;
var listO3Text = listO3.options[listO3.
selectedlndex].text;
var listO4 = document.formname.requiredlistO4;
var listO4Text = listO4.options[listO4.
selectedlndex].text;
var listO5 = document.formname.re<iuiredlistO5;
var listO5Text = listO5.options[listO5.
selectedlndex].text;
/* Приведенный выше код создает в форме новые пере-
менные для требуемых списков и меню и принимает
текст выбранных вариантов по каждой переменной. Ес-
ли число списков или меню меньше пяти, удалите не-
нужные строки кода. Если число списков или меню рав-
но или больше шести, добавьте новые строки кода.
Следующая строка кода создает новую переменную с
именем "pass" и устанавливает для нее значение рав-
ное "true". */
var pass = true;
/* Приведенные ниже блоки кода if/then проверяют,
отображаются ли по-прежнему в требуемых списках или
меню пункты, установленные по умолчанию. Если хотя
бы в одном списке или меню выделенным является
пункт, установленный по умолчанию, переменная pass
принимает значение false. Для каждого списка или
меню необходим один блок кода if/then, поэтому
Строим Web-сайты
390

удалите ненужные блоки или добавьте дополнительные
блоки кода, если необходимо больше пяти блоков ко-
да if/then. */
if (listOlText == "Выберите пункт...") {
pass = false;

if (listO2Text == "Выберите пункт...") {
pass = false;

if (listO3Text == "Выберите пункт...") {
pass = false;

if (listO4Text == "Выберите пункт...") {
pass = false;

if (listO5Text == "Выберите пункт...") {
pass = false;

/* Следующий блок кода if/then проверяет значение
переменной pass. Если значение переменной pass рав-
но false, форма не передается. */
if (pass == false) {
alert("Следует сделать . выбор во всех списках и
меню.") ;
• .
return false;


Инструментарий Проверка ввода только буквенно-цифровых символов
Добавьте данный блок кода в сценарий проверки на достовер-
ность, чтобы проконтролировать, что посетитель вводит только
буквенно-цифровые знаки в текстовое поле, текстовую область
или поле пароля:
var field = new String(document.formname.field-
name, value) ;
/* Приведенный выше код создает новую переменную
для значения требуемого поля. Замените formname
именем формы, fieldname именем поля, которое тре-
буется проконтролировать.
Следующая строка кода создает переменную с именем
"pass" и присваивает этой переменной значение
"true". */
391
ГЛАВА 70. Проверка достоверности входных данных формы

var pass = true;
/* Следующий блок текста описывает цикл for/nex.t.
Данный сценарий просматривает каждый знак в поле и
определяет, является ли знак буквой или цифрой. Ес-
ли знак не является ни буквой и ни цифрой, пере-
менная pass принимает значение false. */
for (var x = 0; х < field.length; x++) {
if (field.charCodeAt(x) < 48 I I
(field.charCodeAt(x) > 57 && field.charCodeAt(x)
< 65) II
;field.charCodeAt(x) > 90 && field.charCodeAt(x)
97!
field.charCodeAt(x) > 122) {
pass = false;



/* Теперь, если переменная pass принимает значение
f a l s e , браузер выводит сообщение об ошибке, удаля-
ет значение некорректно заполненного поля и авто-
матически выделяет это поле, чтобы посетитель мог
повторить попытку ввода. */
if (pass == f a l s e ) ' {
alert ("Вводимая запись содержит символы отлич-
ные от букв и цифр.")
document.formname.fieldname.value ="";

<< Пред. стр.

стр. 41
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>