Отправляет email-рассылки с помощью сервиса Sendsay

Упражнения по яванскому письму. Javascript.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Виртуальный офис - дома" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
12345c

Статистика

0 подписчиков
0 за неделю
←   Все выпуски   →

Скрипт проверки правильности заполнения формы.


 javascript.aho.ru Javascript в браузерах: разработка, документация, примеры. Выпуск # 4, 2006-05-10
Вопросы
Справки
Ссылки
Примеры
краткое содержание

Скрипт проверки правильности заполнения формы.

(1) Ссылки на смежные вопросы веб-программирования: материалы о CSS, XML, SSI, отдельных вопросах программирования на Javascript. (2) Проверка правильности заполнения форм.
Существует дней: 20
Автор: 12345c
Другие выпуски:
Рассылка 'Упражнения по яванскому письму. Javascript.'
 
Обзор ссылок
10.05.06

Смежные темы по веб-технологиям.

 По технологиям CSS, XML, SSI, дизайну, отдельным вопросам программирования. Всё, что обычно связано с HTML и Javascript при проектировании сайтов.
Регулярные выражения. Дж.Фридл (2-е изд.) [rar, 7.5 М], "Питер" 2003, 464 с. (просмотр формата DjVu - Windjview) или оцифрованный вариант в html.
Расширяемый язык разметки (XML) 1.0 (вторая редакция). W3C , 2000.
Редактирование XML-данных через Web при помощи W3C XML Schema и XSLT. Ali Mesbah, 2003
Разработка скриптов - список статей по скриптовым языкам. Особо полезны по теме статьи по работе с XML (6 шт., например, "Сценарии объектной модели документа DOM XML").
Прочие статьи с сайта www.webscript.ru о веб-технологиях. (рус.), 2000-2005. Собраны полезные статьи без погони за массовостью заполнения содержанием. Не столько о программировании, сколько о решении практических вопросов управления сайтом и его функционирования на глубоком уровне.
Server Side Includes - (рус.), ок.2001 - достаточно полное описание функций частоиспользуемого протокола. Сайт перестал развиваться в районе 2001 года, но там есть ещё полезная статья - Статус-код и пояснение к нему, такая же достаточно старая классика протокола http. Правда, без ссылки на источник.
SSI в примерах. Андрей Аликберов, ок.2000 г.
SSI. Ерижоков А.А., DH's Linux Site
Изучаем SSI - Изложение в другом стиле, с меньшим объёмом.
Остальные разделы документации этого сайта - из серии "На что не надо смотреть" (в частности, JS) - потому что информация устарела, а год издания явно не указан.
Программирование TCP/IP (книга - html).
Язык и архитектура Java. Введение. В.Цишевский, Jet Infosystems, 1996 - действительно, введение, описание начал, принципов построения.
Introducing JSON - JSON (JavaScript Object Notation) is a lightweight data-interchange format. Обсуждение по-русски - ***
AJAX: свежий взгляд на программное обеспечение - Мартин Ла-Моника, CNET News.com, 5 октября, 2005. Общая (словесная) статья. Ближе к делу - Top 10 Ajax Applications
Mono Project. ...run .NET client and server applications on Linux, Solaris, Mac OS X, Windows, and Unix.
CSS-изыски. (ан.) ок. 20 решений (типа скруглённых углов без рисунков), но и внимание к ним не распылённое.
Значки для страниц вебсайтов Подробная статья о создании и использовании значков (пиктограмм, икон).
Компьютерная документация на русском. Статей по JS - 6 шт., 2004-05 г
Online Documentation server. статьии и книги, но по JS (5-6 кн., ок. 20 статей) всё очень старо или просто старо.

Уровень: для программистов
-v---
Статья.
10.05.06

Проверка заполнения форм.

 Часто встречается задача узнать перед отправкой, заполнены ли поля, правильно ли они заполнены. Вариант контроля - не перед отправкой, а непосредственно в момент ввода проверять, например, вводится число или не число, кириллица или латинница.

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

Какие свойства объекта-формы используются при проверке? Прежде всего, момент перед отправкой формы ловится методом (событием) onsubmit, которое принадлежит тегу <FORM>. Можно ловить и нажатия на кнопки отправки, но они - не единственный способ отправки формы, есть ещё нажатие "Enter" при нахождении курсора в однострочном поле ввода и метод submit() объекта form. Однако, после нажатий на кнопки или Enter наступает onsubmit, и если из него вернуть false, отправки формы не призойдёт. Функцию же submit() мы можем контролировать программно, потому что её пишем сами.

<form name=f1 action=
  "javascript:(d=document).write('Форма отправлена');d.close();"
  onsubmit=alert("Не-а");return(false)>
  форма не отправится<br>
<input value=12345> Вставьте курсор и нажмите Enter
    <br> для попытки отправить форму<br>
<input type=submit value=Отправить?>
  нажмите Enter для того же<br>
Нажмите <a href=# onclick=
  alert("Обошёл-таки!");document.forms.f1.submit();return!1>
  ссылку</a> для той же попытки отправить форму<br>
</form>

На этом основана остановка отправки при проверке правильности заполнения полей формы: если onsubmit возвращает false, пользователь имеет ещё одну попытку исправить данные формы, если возвращается true или ничего не возвращается, происходит отправка формы.

Далее, для проверки полей, пользуемся свойствами полей, возвращающими значение. Это всем известные value для полей тегов input, свойства checked для чекбоксов, selected для опций тегов select.

Например, нужно проверить, что некоторые поля ввода заполнены и поставлен чекбокс.

<form name=f2
  action="javascript:d.write('Форма отправлена');d.close();"
  onsubmit="return chk('Не все поля заполнены')">
<input id=i1 value=12345> Необязательное поле<br>
*<input id=i2 value=> Обязательное поле<br>
*<input id=i3 value=> Обязательное поле<br>
<input id=i4 value=67890> Необязательное поле<br>
*<input type=checkbox id=c1> Обязательное поле<br>
<input type=submit value=Отправить> нажмите Enter или кнопку<br>
<a href=#
onclick=if(chk('Не зап. поля')!=false)d.forms.f2.submit();return!1>
 Ссылка</a>, отправка с проверкой через submit()<br>
</form>
<script>d=document;
chk=function(s){
if(d.f2.i2.value==''||d.f2.i3.value==''||d.f2.c1.checked==false)
 {alert(s);return false;}
}
</script>

Если не будет установлен чекбокс и если не заполнено хотя бы одно из обязательных полей, получим ответ 'Не все поля заполнены'.

Пример, иллюстрирующий приведённые коды, находится по адресу http://javascript.aho.ru/subs/subs004xmp.htm

 

Так, тут оказалось, что разумный объём статьи исчерпан, и вопросы, заложенные в заголовке (немедленная проверка на числа и на латинницу-кириллицу), придётся перенести в следующий выпуск. Ведь надо разобрать не только примеры, а ряд хитростей программирования в них, которых набралось достаточно, которым будет посвящён текст ниже. Иначе, код примеров сильно отличается от приводимых в учебниках и будет непонятен для начинающих, которым посвящена статья.

Начнём по порядку.

1) Что означает action="javascript:(d=document).write('Форма отправлена');d.close();" ?

В 1 строчке - 3 "не очень стандартных" оборота. Они вызваны простой причиной: от нежелания раздувать объём кодов. Обычно на месте action стоит скрипт, который будет способен обработать запрос от формы и вернуть страницу ответа. Например, action=reply.php . Тогда пришлось бы писать страницу скрипта PHP, подключать сервер, чтобы он заработал. Мне же не хочется даже писать лишнюю HTML-страницу типа reply.htm с содержанием из 2 слов: "Форма отправлена". Поэтому использую javascript:...(коды)... . Но не могу написать функцию, потому что страница затирается вновь создаваемой, и функция сотрётся. Выход - написать в 1 строчку коды той страницы, которую хочу вывести: (d=document).write('Форма отправлена');d.close();. В ней, для краткости, написан оператор в операторе (d=document). А в конце обязательный в таких случаях d.close(); или document.close();, иначе завершится создание новой страницы некорректно.

2) Почему нет кавычек вокруг onsubmit=alert("Не-а");return(false)> ?

Все браузеры понимают отсутствие кавычек (кроме режима валидного кода XHTML) и считают, что параметр длится до первого пробела или знака ">". Поэтому, если пишем для людей, а не для браузеров, нет необходимости засорять текст кавычками и усложнять его понимание. В частности, чтобы избежать пробела в "return false", он заменён на return(false).

3) Что означает return!1 ?

То же, что и return false с тем же избеганием пробела. Соответственно, return!0 будет return true.

4) Зачем return!1 в теге <a>?

Чтобы не происходил переход по ссылке. Та же отмена события, что и в теге формы, но для <a>.

5) Почему не объявлен (d=document) во 2-м примере?

Он объявлен ниже в скрипте, а тот скрипт (d=document;) выполняется раньше, чем отправка формы, поэтому ошибки не будет.

6) Зачем параметр текста в функции chk?

Так захотелось.

7) Почему if(chk('Не заполнены поля')!=false) , а не просто if(chk('Не заполнены поля')) ?

Потому что функция chk() написана так, что даёт как return false, так и return null (ничего не возвращает). Если бы всегда что-то возвращала, второй вариант был бы возможен.

Уровень - для начинающих.
-v---
Примечание.
10.05.06

Об уровне статей рассылки.

 Видится разумным вначале (3-4 недели) говорить на не очень сложные темы, чтобы статьи были максимально познавательны.

Пока что я пишу в рассылку статьи несложного уровня, подумав о том, что людей, нуждающихся в доходчивых несложных статьях намного больше, чем желающих почитать что-то актуальное и сложное (типа построения Wysiwyg-редактора или динамической сортировки таблицы). К тому, же, знающие и без того найдут, где всё это почитать или сделают сами. Хотя было заявлено, что рассылка будет о сложном и продвинутом. В дальнейшем это будет так, сложных тем хватает, которые надо разобрать и написать на их основе полезные скрипты. Для начинающих будет сделана параллельно другая рассылка, где заодно со статьями будут обновляемые справочные материалы.

Уровень: для всех
-v---
 javascript.aho.ru , © I.Svetlov, 2005-2006 
Текущая очерёдность плана статей (подписчики могут корректировать через голосование).
2. Автоматический выбор группы опций в мультиселект-списке, многоуровневое меню в <select>,
3. Как писать тексты с доступом через JS без экранирования специальных символов (&lt; и другие).
4. select и list - в них есть много общего. Как и с меню навигации. Эмулятор селекта.
5. Древовидное меню, подход к данным, отделение данных от представления.
6. Многонедельный календарь со ссылками. (По списку строится календарь.)

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

 
В избранное