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

В форме осталось проверить еще ввод адреса 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('.')

Здесь имеются две новые сходные функции, которые требуют пояснения. Функция 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('.')

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

Как мы уже знаем, функции в JavaScript используются для многократного выполнения одной и той же задачи. До сих пор функции всегда вызывались вручную с помощью скобок: myFunction() . Что, если потребуется вызвать функцию, когда пользователь выполняет определенную задачу? В JavaScript можно соединить функцию практически с любым событием, которое может порождать пользователь. Давайте посмотрим это в действии и напишем функцию, которая подсчитывает, сколько раз пользователь щелкнул на странице.

var clickCount = 0; function documentClick(){ document.getElementById('clicked').value = ++clickCount; } document.onclick = documentClick; Вы щелкнули на этой странице раз. Вы щелкнули на этой странице раз.

В предыдущей лекцииоператор ++ был применен только после переменной, как в случае clickCount++ . Однако в данном примере оператор ++ используется перед переменной. В первом примере clickCount++ , единица добавляется к переменной clickCount после чтения ее значения. В случае ++clickCount единица добавляется к переменной clickCount перед чтением ее значения. Так как в этом примере переменной clickCount в начале присваивается значение 0 , то единицу к ней необходимо добавлять до задания значения поля ввода, поэтому использована запись ++clickCount .

Предыдущий пример может показаться достаточно знакомым. Так же, как и раньше, определяется переменная и функция. Изменение состоит в том, что вместо вызова функции documentClick() код содержит указание, что функция должна выполняться всякий раз, когда пользователь щелкает на документе. document.onclick связывает функцию с событием документа onclick ("при щелчке").

Существует множество событий подобных onclick . Мы познакомимся с некоторыми из них, но наиболее распространенными являются: onclick , onload , onblur , onfocus , onchange , onmouseover , onmouseout и onmousemove . Функцию можно связать с событиями любого объекта, такого, как изображение или поле ввода, а не только документа. Например, события onmouseover и onmouseout используются обычно с изображениями для создания эффекта изменения.

Можно также заметить, что ссылка на поле ввода делается другим образом. Ранее говорилось, что для указания поля необходимо использовать document.forms.имяФормы.elements.имяПоляВвода . Хотя этот способ прекрасно работает, это не всегда необходимо. В данном примере поле ввода действует просто как счетчик. Оно не находится внутри формы, и нам это и не нужно. Поэтому мы задаем для поля некоторый ID (идентификатор): id="clicked" . ID можно использовать для ссылки на любой объект на странице. ID должен быть уникальным на странице, поэтому если имеется 5 полей ввода с ID , то все ID должны быть различны, даже если они только имеют вид "input1"-->"input5" .