![]() |
![]() |
![]() |
|||
|
![]() |
***
WEB Star #6*** :: WEB фокусы ::
|
![]() ![]() |
![]() ![]() ![]() |
JavaScript: полезные функции (часть III) Автор: Михаил Мельников В этой статье мы начнем разбираться с более сложными и функционально-законченными скриптами. Пройдем по шагам, через все стадии - начиная с постановки задачи и заканчивая универсальным скриптом, готовым к употреблению. И начнем с проверки формы перед отсылкой на сервер. Общие соображения и HTML-код формы Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо ее вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой, и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя. Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так: <form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();"> Ваше имя:
*<input type="text" name="name"><br> <input
type="submit" value="Отправить"> </form> * - необходимые для заполнения поля
Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придется заменить обычной кнопкой. И в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена. Будем считать, что необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Если Вы внимательно присмотритесь к HTML-коду нашей формы, то заметите, что рядом с этими полями я поставил звездочку, а в конце формы разместил сноску. Сделано это, разумеется, для удобства и элементарного уважения к пользователю. Функция проверки формы перед отправкой А теперь перейдем к главному - к написанию той самой функции, что будет непосредственно осуществлять проверку формы. Давайте подумаем, что нам от нее требуется? Ну, во-первых, проверить, что нужные поля заполнены, а во-вторых, отослать форму. В случае же, если несколько из обязательных полей пусты, нам нужно сформировать об этом сообщение пользователю и переместить курсор на соответствующий элемент. Для начала напишем общую обвязку функции: <script
language="JavaScript"> function SendForm() { // Здесь мы разместим код функции return true; //--> </script> Примененный нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет. Теперь попробуем написать проверочную функцию, привязанную к данной конретной форме. Как Вы помните, необходимых для заполнения полей у нас всего два: имя посетителя и его электронный адрес. Самое простое - это проверить содержимое каждого из обязательных полей на отсутствие текста: <script
language="JavaScript"> function SendForm() { if (document.forms[0].name.value
== "") { if (document.forms[0].email.value
== "") { return true; //--> Как видите, функция проверки состоит из двух идентичных блоков, различающихся только именем проверяемого поля. Давайте прокомментируем каждую строчку в этих блоках:
В случае же, если проверяемое поле не было пустым, то соответствующий блок просто пропускается. При пропуске всех проверочных блоков функция в качестве результата возвращает true, что свидетельствует об успешной проверке. Универсальная функция проверки Если нам необходимо проверить всего два или три поля, то с таким методом проверки "по одиночке" еще можно смириться, но что, если их несколько десятков? А ведь такое не редкость - особенно в сложных анкетах. Поэтому мы немного модифицируем нашу функцию, чтобы она не зависела от количества проверяемых полей. Первым делом, мы создадим массив, где перечислим имена всех полей, которые требуют проверки: required = new Array("name", "email"); Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции. Дополнительно к вышеописанному массиву, мы добавим еще один, который будет содержать текст ошибки для конкретного поля: required_show = new Array("Ваше имя", "электронный адрес"); Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введен". Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки: <script
language="JavaScript"> required
= new Array("name", "email"); function SendForm () { var i, j; for(j=0;
j<required.length; j++) { return true; //--> </script> В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом - введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля. Вот, в общем-то, и все. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме. |
![]() |
Перепечатка
материалов разрешается, только после письменного разрешения автора (e-mail).
При перепечатке любого материала с журнала видимая ссылка на источник
www.kovrik.hut.ru и все имена,
ссылки авторов обязательны.
|
![]() |
©
Copyright Алекс aka TrigGer & x-graphic studio.
© Все права защищены. |
Для
просмотра журнала рекомендуеться: Разрешение: 1024*768 точек Браузер: Internet Explorer 5.5 или выше Для более эффективного просмотра нажмите F11. |