Марк Кан - Основы программирования на JavaScript

function validateForm(){

var form_object = document.forms.tutform;

if(form_object.elements.firstname.value == ''){

alert('Вы должны ввести свое имя!');

return false;

} else if(form_object.elements.lastname.value == ''){

alert('Вы должны ввести свою фамилию!');

return false;

}

return true;

}

Важными моментами, которые необходимо отметить в этой функции, являются строки return false ; и return true ;. Если функция проверки возвращает значение true , то форма будет отправлена как обычно. Если, однако, функция вернет значение false , то форма отправлена не будет. Необходимо сообщить пользователю, почему форма не была отправлена, поэтому в функцию вставлены уведомления ( alert ).

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

Радио-кнопки и флажки на форме представляют специальную ситуацию. Часто имеется несколько радио-кнопок с одним и тем же именем, что почти всегда исключено для полей ввода, полей выбора и т.д.:

Синий

Красный

Зеленый

В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем. Значение document.forms.имяФормы.elements.имяРадиокнопок будет содержать список со всеми радио-кнопками. Так как необходимо проверить, что хотя бы одна радио-кнопка отмечена, то потребуется просмотреть все эти радио-кнопки. Если хотя бы одна из них отмечена, функция проверки должна вернуть true . Поэтому функция выглядит теперь следующим образом:

function validateForm(){

var radios = document.forms.tutform.elements.color;

for(var i=0; i

if(radios[i].checked) return true;

}

alert('Вы должны выбрать цвет!');

return false;

}

Новым элементом в этом коде является так называемый цикл for . Он выглядит немного более сложно, чем есть в действительности, поэтому разберем его составные элементы:

for(var i=0; i

Внутри скобок имеется три значения, разделенные точкой с запятой. Этими значениями, по отдельности, являются:

var i=0

i

i++

Первое значение является просто заданием значения переменной. Это должно быть теперь понятно без проблем. Второе значение является условием проверки. Цикл for будет выполняться, пока это условие проверки возвращет true . Как только оно вернет false , цикл for остановится и выполнение кода продолжится со следующей строки. Поэтому условие i говорит, что цикл for должен выполняться, пока переменная i меньше числа имеющихся радио-кнопок.

" length " в данном случае является свойством массива. Мы пока еще не встречались с массивами, но, упрощая, можно сказать, что radios.length возвращает просто число элементов в radios , которое в данном случае равно 6 , так как имеется только 6 радио-кнопок. Последнее выражение цикла for , i++ , является кодом, который должен выполняться после каждого шага цикла.

Говоря более простым языком, цикл for делает следующее:

1задает i равным 0 ;

2проверяет, что i меньше radios.length , которое равно 6 ;

3если это справедливо ( true ), выполняет код в цикле for ;

4после выполнения кода в цикле for добавляет 1 к переменной i ;

5переходит к шагу 2, пока выполняется условие i . Это условие не выполнится после шестого выполнения цикла, когда i=6 .

Существует другой тип цикла, который сейчас будет рассмотрен, - так называемый цикл while . Следующий код делает то же самое, что и предыдущий цикл:

var i=0;

while(i

if(radios[i].checked) return true;

i++;

}

alert('Вы должны выбрать цвет!');

return false;

Можно видеть, что здесь в цикле while присутствуют точно те же 3 фрагмента кода, которые имелись в цикле for : " var i=0 ", " i " и " i++ ". Единственное отличие состоит в их размещении. В цикле while только проверка

i

чем-то отличается от того, что было написано раньше. Эта проверка происходит в скобках сразу после while . Переменные инициализируются перед циклом while , а увеличение i , i++ , происходит внутри цикла.

В этих циклах осталось объяснить еще одну вещь: if(radios[i].checked) . Переменная radios содержит массив радио-кнопок с именем color . Массивы будут рассмотрены в следующей лекции, а здесь дадим упрощенное объяснение: radios[0] возвращает первую радио-кнопку, radios[1] возвращает вторую, radios[2] - третью, и т.д. до radios[5] , который возвращает шестую кнопку. Если кнопок будет больше, например, 100 , то radios[99] будет обращаться к 100 -ой радио-кнопке.