<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

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

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Динамическая проверка формы на JavaScript

Динамическая проверка формы на JavaScript

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

Начнём мы с HTML-формы:

<form name="myform" action="#" method="post">
  <p>Логин: <input type="text" name="login" onkeyup="check(this.value)" /> <span id="e_login" style="display: none; color: #c00;">Логин введён неправильно</span></p>
</form>

Ключевой момент - это обработчик события onkeyup. Событие keyup отвечает за отпускание клавиши. Обратите внимание, что очень часто ставят onkeypress или onkeydown - это неправильно, так как будет происходить отставание на 1 шаг. Рекомендую попробовать поставить, например, onkeypress и проанализировать результат.

JavaScript-код тоже очень простой:

<script type="text/javascript">
  function check(login) {
    if (login.length < 3) document.getElementById("e_login").style.display = "inline";
    else document.getElementById("e_login").style.display = "none";
  }
</script>

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

Аналогично, можно проверять абсолютно любые формы. Также не забывайте, что перед отправкой надо целиком проверить ещё раз всю форму. Делается это через onsubmit у тега form. И всегда помните, что проверка формы на JavaScript не отменяет проверку формы в PHP.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (8):

morozov-semen morozov-semen 07.06.2013 18:41:08

Спасибо за статью. Очень полезный материал. В коде пропущен тег </span>

Ответить

Admin Admin 07.06.2013 22:05:16

Спасибо, исправил!

Ответить

RONNI RONNI 07.06.2013 23:11:32

Статья очень пригодилась

Ответить

Indever2 Indever2 08.06.2013 20:15:05

Статья очень полезная. Хотелось бы, чтобы была статья, где подробно бы указывалось, как реализовать более расширенную динамическую проверку формы - что-то вроде регистрации на Вашем сайте! Спасибо.

Ответить

lev_100rus lev_100rus 09.06.2013 00:53:05

Ни в коем случае не нужно это делать. Уже есть много статей, где подробно рассказывается обо всём, что нужно знать и применять в JavaScript. В этой статье даже показали, как сделать проверку формы. Изучив все статьи у Михаила, вы сможете сделать всё, что захотите. А какой смысл каждый случай рассматривать отдельно? А если вы захотите изменить что-то в своей форме, то что, снова Михаилу писать с просьбой о статье?

Ответить

Indever2 Indever2 09.06.2013 06:05:44

VLAD, создание регистрации - очень трудный процесс для новичков. Создавая скрипты PHP для проверки и отправки формы, уходит много времени, и не всегда удаётся сделать всё правильно. Динамическая проверка формы - это хорошо. Но материалы из этой статьи могут принести гораздо больше пользы, если будут совокупляться с другими материалами, объединёнными рассмотрением одного-единственного случая.

Ответить

andrew11 andrew11 06.10.2013 18:55:11

Здравствуйте Михаил, мне бы хотелось знать. Вот например неправильно ввел логин, но что ему мешает отправить данные на сервер, тупо нажав на enter. Так не могли бы вы пожалуйста написать еще, как предотвратить отправку данных на сервер, если неправельно введены данные ( между прочим у вас на сайте эта вещь реализованна )

Ответить

Admin Admin 06.10.2013 20:38:26

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

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.