Другим важным полем для проверки в демонстрационной форме будет набор радио-кнопок "Любимый цвет ". Если щелкнуть несколько раз на этих кнопках, то можно видеть, что в данный момент времени может быть выбрана только одна из них. Но желательно знать, что пользователь выбрал хотя бы одну из этих кнопок.
Радио-кнопки и флажки на форме представляют специальную ситуацию. Часто имеется несколько радио-кнопок с одним и тем же именем, что почти всегда исключено для полей ввода, полей выбора и т.д.:
<input type="radio" name="color" value="blue">Синий <input type="radio" name="color" value="red">Красный <input type="radio" name="color" value="green">Зеленый
В связи с этим существует способ доступа ко всем радио-кнопкам с одним именем. Значение document.forms.имяФормы.elements.имяРадиокнопок будет содержать список со всеми радио-кнопками. Так как необходимо проверить, что хотя бы одна радио-кнопка отмечена, то потребуется просмотреть все эти радио-кнопки. Если хотя бы одна из них отмечена, функция проверки должна вернуть true. Поэтому функция выглядит теперь следующим образом:
function validateForm(){ var radios = document.forms.tutform.elements.color; for(var i=0; i<radios.length; i++){ if(radios[i].checked) return true; } alert('Вы должны выбрать цвет!'); return false; }
Новым элементом в этом коде является так называемый цикл for. Он выглядит немного более сложно, чем есть в действительности, поэтому разберем его составные элементы:
for(var i=0; i<radios.length; i++){
Внутри скобок имеется три значения, разделенные точкой с запятой. Этими значениями, по отдельности, являются:
var i=0 i<radios.length i++
Первое значение является просто заданием значения переменной. Это должно быть теперь понятно без проблем. Второе значение является условием проверки. Цикл for будет выполняться, пока это условие проверки возвращет true. Как только оно вернет false, цикл for остановится и выполнение кода продолжится со следующей строки. Поэтому условие i<radios.length говорит, что цикл 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<radios.length . Это условие не выполнится после шестого выполнения цикла, когда i=6.
Существует другой тип цикла, который сейчас будет рассмотрен, - так называемый цикл while. Следующий код делает то же самое, что и предыдущий цикл:
var i=0; while(i<radios.length){ if(radios[i].checked) return true; i++; } alert('Вы должны выбрать цвет!'); return false;
Можно видеть, что здесь в цикле while присутствуют точно те же 3 фрагмента кода, которые имелись в цикле for: "var i=0 ", "i<radios.length " и "i++ ". Единственное отличие состоит в их размещении. В цикле while только проверка
i<radios.length
чем-то отличается от того, что было написано раньше. Эта проверка происходит в скобках сразу после while. Переменные инициализируются перед циклом while, а увеличение i, i++, происходит внутри цикла.
В этих циклах осталось объяснить еще одну вещь: if(radios[i].checked). Переменная radios содержит массив радио-кнопок с именем color. Массивы будут рассмотрены в следующей лекции, а здесь дадим упрощенное объяснение: radios[0] возвращает первую радио-кнопку, radios[1] возвращает вторую, radios[2] - третью, и т.д. до radios[5], который возвращает шестую кнопку. Если кнопок будет больше, например, 100, то radios[99] будет обращаться к 100-ой радио-кнопке.
Все эти числа могут показаться странными. Почему radios[5] обращается к шестой радио-кнопке? В JavaScript, как и во многих других языках программирования, многие вещи начинаются с числа 0, а не с 1. Это просто один из таких случаев, но это встретится еще не раз. Поэтому 0 является в действительности первым элементом, 1 - вторым, и т.д.
В форме осталось проверить еще ввод адреса e-mail. Это в действительности достаточно сложное для проверки поле, и правильная ее реализация выходит за рамки того, что изучается в этой лекции, но можно выполнить некоторую базовую проверку. Что нужно сделать? Мы знаем, что любой адрес e-mail должен содержать один и только один символ @. Он должен также содержать по крайней мере одну точку после символа @ (точка отделяет имя домена от домена верхнего уровня, например, "intuit.ru ").
function validateForm(){ var email = document.forms.tutform.elements.email.value; if(email.indexOf('@')<0){ alert('В адресе e-mail должен присутствовать символ @'); return false; } else if(email.indexOf('@') != email.lastIndexOf('@')){ alert('В адресе e-mail не может быть больше одного символа @'); return false; } else if(email.indexOf('.')<0){ alert('В адресе e-mail должна присутствовать хотя бы одна точка.'); return false; } else if(email.lastIndexOf('.')<email.indexOf('@')){ alert('В адресе e-mail должна присутствовать хотя бы одна точка после символа @'); return false; } return true; }
Здесь имеются две новые сходные функции, которые требуют пояснения. Функция indexOf возвращает число, определяющее позицию одной строки в другой строке. 'abcdef'.indexOf('a') вернет 0 (здесь 0 снова означает первую позицию). 'abcdef'.indexOf('cdef') вернет 2, а 'abcdef'.indexOf('aaa') вернет -1. -1 означает, что строка не найдена. Во многих случаях возвращается -1, когда функция не может получить результат.
Аналогично, функция lastIndexOf возвращает позицию последнего вхождения одной строки в другую. 'abcba'.lastIndexOf('a') вернет 4, в то время как 'abcba'.indexOf('a') вернет 0.
Поэтому в нашем коде первый оператор if проверяет, что в адресе e-mail имеется хотя бы один символ '@'. Если такого символа нет, то email.indexOf('@') вернет -1 и оператор if вернет false.
Следующий оператор соединяет indexOf и lastIndexOf. Если в адресе e-mail имеется более одного символа @, то две эти функции вернут различные значения, как в приведенном выше примере с 'abcba'. Если имеется только один символ @, то эти функции вернут одно и то же значение. Поэтому мы проверяем эти значения на неравенство.
Третий оператор по сути идентичен первому, только он проверяет '.', а не '@'.
Наконец, четвертый оператор if проверяет, что в адресе e-mail имеется как минимум одна точка после символа @.
Недостаток этого метода состоит в том, что простая строка "@." пройдет проверку. Должно быть очевидно, что она не является допустимым адресом e-mail. Существует другой метод для проверки адреса e-mail и для проверки множества других вещей. Это делается с помощью так называемых "регулярных выражений". Хотя регулярные выражения здесь рассматриваться не будут, ниже приведен пример проверки адреса e-mail, который остается читателю для анализа в качестве упражнения.
function validateForm(){ var email = document.forms.tutform.elements.email.value; if(!(/^[a-zA-Z][w.-]*[a-zA-Z0-9]@[a-zA-Z0-9][w.-]*[a-zA-Z0-9]. [a-zA-Z][a-zA-Z.]*[a-zA-Z]$/.test(email))){ alert('Пожалуйста, введите допустимый адрес e-mail'); return false; } return true; }
Как можно видеть, использование регулярного выражения приводит к более короткому (и более надежному) коду проверки, но он является и существенно более сложным!
С помощью примеров этой лекции теперь можно создать одну функцию для проверки всей формы:
function tut7(){ var form_object = document.forms.tutform; var radios = document.forms.tutform.elements.color; var email = document.forms.tutform.elements.email.value; if(form_object.elements.firstname.value == "){ alert('Вы должны ввести свое имя!'); return false(); } else if(form_object.elements.lastname.value == "){ alert('Вы должны ввести свою фамилию!'); return false(); } else if(email.indexOf('@')<0){ alert('В адресе e-mail должен быть символ @'); return false(); } else if(email.indexOf('@') != email.lastIndexOf('@')){ alert('В адресе e-mail не может быть более одного символа @'); return false(); } else if(email.indexOf('.')<0){ alert('В адресе e-mail должна быть как минимум одна точка'); return false(); } else if(email.lastIndexOf('.')<email.indexOf('@')){ alert('В адресе e-mail должна быть как минимум одна точка после символа @'); return false(); } for(var i=0; i<radios.length; i++){ if(radios[i].checked) return true(); } alert('Необходимо выбрать цвет!'); return false; }