Похожие статьи

Имитация гиперссылок с помощью JavaScript (58,54%)
С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…

Оформление текста с помощью CSS (44,44%)
Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство)… Итак, сверстаем текст, который удобно читать…

Создание всплеска посещаемости сайта с помощью программы Add2Board (42,99%)
Часто встает задача создать кратковременный всплеск посещаемости сайта для привлечения внимания целевой аудитории к новинкам, новостям сайта. Такие события, как поступление новых позиций товаров, сезонные скидки и т.п. имеют короткий период актуальности. Поэтому, освещение событий и рекламные кампании должны носить кратковременный, но массовый характер…

Автор: Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

Дата публикации 19-08-2005 23:27
Статья просмотрена 33886 раз

Посетители сайта — это наше всё. Их надо холить, лелеять, заботиться о них. А еще им нельзя доверять… Чтобы сайт не взломали, всегда и везде необходимо проверять введенные пользователем данные. Делать это лучше на сервере соответствующими средствами.

Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :)

Приближаться к высокому идеалу удобного веб-сайта мы будем на примере формы отзыва на e-mail.

<form name="mailer" id="mailer" action="/mail.php" method="post" onsubmit="return checkmailform();">
  E-mail отправителя:<br /> <input type="text" name="mailsender" id="mailsender" /><br />
  Текст письма:<br /> <textarea name="mailtext" id="mailtext" cols="35" rows="5"></textarea><br />
  <input type="submit" value="Отправить" />
</form>

Форма состоит из полей ввода e-mail отправителя и текста сообщения и кнопки отправки данных серверному скрипту mail.php. Для формы и полей данных в атрибутах id и name (они идентичны, name используется для обратной совместимости) указаны уникальные имена, которыми мы будем оперировать в программе на JavaScript.

С помощью события документа (action) onsubmit, возникающего при отправке формы, мы вызываем JavaScript функцию, которая и отвечает за проверку введенных пользователем данных.

function checkmailform()
{
  if ( (document.forms.mailer.mailsender.value == null) || (document.forms.mailer.mailsender.value.length < 7) )
  {
    alert("Заполните поле: E-mail отправителя");
    document.forms.mailer.mailsender.focus();
    return false;
  }
  if (! (/^\w+[-_\.]*\w+@\w+-?\w+\.[a-z]{2,4}$/.test(document.forms.mailer.mailsender.value)) )
  {
    alert("Введите правильный e-mail адрес");
    document.forms.mailer.mailsender.focus();
    return false;
  }      
  if ( (document.forms.mailer.mailtext.value == null) || (document.forms.mailer.mailtext.value.length < 10) )
  {
    alert("Заполните поле: Текст письма");
    document.forms.mailer.mailtext.focus();
    return false;
  }
  return true;
}

К данным XHTML-формы мы обращаемся в следующем формате: документ.все_формы.имя_формы(у нас это name="mailer").имя_поля. Добавление «.value» дает нам текст внутри указанного по имени элемента формы, а «.value.length» — длину этого текста в символах.

Функция делает 3 проверки:

  1. Введен ли вообще текст в поле «E-mail отправителя» и не меньше ли он 7 символов.
  2. Регулярным выражением проверяет, является ли адрес отправителя правильным e-mail адресом: имя@домен.зонадомена.
  3. Введен ли текст сообщения и не меньше ли он 10 символов.
Проверка полей формы с помощью JavaScript - пример ошибки заполнения поля форма

Если хотя бы одна из проверок не пройдена, работа скрипта останавливается, отправка данных формы на сервер отменяется, пользователь получает сообщение с ошибкой, а курсор клавиатуры помещается в поле формы, вызвавшее ошибку. Если проблем не обнаружено, JavaScript не мешает отправке данных на сервер.

Похожие статьи

Повышаем юзабилити формы поиска (41,67%)
Большинство серьезных сайтов имеет сложные внутренние поисковые системы, однако все это богатство, как правило, скрыто за ссылкой «расширенный поиск». А вот маленькая форма поискового запроса доступна на каждой странице в верхнем правом углу сайта. Подумаем, как сделать эту форму удобнее для посетителей…

Создание сайта с помощью фреймов (41,1%)
Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…

Выпадающее меню на CSS и JavaScript (39,47%)
Если на сайте слишком много ссылок в расположенном горизонтально главном меню, то для всех разделов может не хватить места. В таком случае необходимо делать выпадающее меню. Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню…

Заработок веб-мастера с помощью малобюджетного проекта (35,79%)
У многих пользователей сети возникало желание заработать с ее помощью. И многие, наверняка, думали заработать на своем сайте, но, поняли, что без хороших капиталовложений им ровным счетом ничего не светит. О том, как все-таки извлечь выгоду из сайта без больших финансовых затрат и пойдет речь далее…

Что такое пользовательский опыт и почему он так необходим любому сайту? (33,93%)
В статье рассказывается об основополагающих принципах создания удобного и понятного посетителям сайта: как использовать предварительно накопленный посетителями опыт работы в сети и почему так важно использование этого пользовательского опыта…

← Раздел «Программирование: JavaScript» | Комментарии (23) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

Имитация гиперссылок с помощью JavaScript С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…

Проверка полей формы с помощью JavaScript В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…

Береги честь смолоду: прячем e-mail адреса от спама Получая ежедневно большое количество спама, я с легкостью могу рассказать, чем «ксанакс» отличается «прозака», где нынче проходят семинары по уходу от налогообложения и сколько стоит база данных автовладельцев Москвы за 2004 год. Если вам такое разностороннее образование не нужно, придется прятать e-mail от спам-роботов. В этом нам поможет JavaScript…

Проверка полей формы с помощью JavaScript В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…

Имитация гиперссылок с помощью JavaScript С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…

Береги честь смолоду: прячем e-mail адреса от спама Получая ежедневно большое количество спама, я с легкостью могу рассказать, чем «ксанакс» отличается «прозака», где нынче проходят семинары по уходу от налогообложения и сколько стоит база данных автовладельцев Москвы за 2004 год. Если вам такое разностороннее образование не нужно, придется прятать e-mail от спам-роботов. В этом нам поможет JavaScript…