Хедер

JavaScript+jQuery.
Проверка корректного ввода е-мейл

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

Прописал такой код для проверки поля e-mail в своей форме расчёта стоимости проката.   (!)И ещё кое-что он сделает.
Подробности под формой.

Мотоцикл 1 Мотоцикл 2 Мотоцикл 3 Мотоцикл 4

На данный момент к прокату доступны следующие модели:

  1. Харлей Дэвидсон
  2. Кроссовый мотоцикл
  3. Гоночный мотоцикл
  4. Концептуальный мотоцикл

Ссылки на сайты производителей и спецификации мотоциклов:

Расчёт стоимости проката мотоциклов:

Дополнительные опции

Нужны ли аксессуары?

Нужна ли страховка?

Модель: Дней:

Укажите Ваш email:

Ваши пожелания:

Проверка корректного ввода е-мейл и блокировка повторной отправки

Цель создания данной страницы - написать и проверить работу интересного скрипта, который "на лету" проверял бы поля формы на соответствие вводимого установленному шаблону. Кроме того, он должен был блокировать повторную отправку сообщения.

Очень часто встречаю на разных сайтах подобные методы совместного использования простого JavaScript + jQuery.

Первая строчка скрипта содержит регулярное выражение JavaScript, которому должен соответствовать введённый е-мейл.
Соответствовать - означает: быть похожим на настоящий.
Правильный/неправильный - это дело заказчика, НО(!), хотя бы похожим на name@domen.ru (всё равно: .ru .com .mail .net и т.д.).

Дальше - берём это регулярное выражение в глобальную переменную, и в дело вступает jQuery.

С помощью метода JavaScript .search (искать) проверяем эту глобальную переменную, в которую взяли регулярное выражение.
Если .search() НЕ найдёт соответствия, вернёт -1 <- Используем это для дальнейшего составления кода, применив обычную конструкцию JavaScript else - if - else, что позволит сделать остальное.

Результат - О.К!   Можно пробовать.

Если ввести "неправильный" е-мейл, типа: 12345, abcde, без @, или концовку как-нибудь "наврать", то, при уходе с этого поля, (кликнуть на другое поле, или рядом) вокруг появится красная рамка, если же всё нормально, рамка будет зелёного цвета.

Кроме того!
Нажав на кнопку "ОТПРАВИТЬ ЗАЯВКУ", сообщение, как бы отправится, и надпись на кнопке станет: "УЖЕ ОТПРАВЛЕНО!", а сама кнопка станет "неактивной", т.е. заблокируется от повторного использования.

* * *

Примечание! P.S.**
Даже, если кликнуть по кнопке "ОТПРАВИТЬ ЗАЯВКУ", а поля формы вообще НЕ заполнять, она всё равно изменится и "скажет", что "УЖЕ ОТПРАВЛЕНО!", и заблокируется.

Никуда, и ничего НЕ отправлялось!
Это скрипт так шутит. Хи-хи!

Ну, а серьёзно.
Не стал до конца прописывать, чтобы, и поле текста проверялось - заполнено ли, и сам заказ отправлялся бы. Для этого нужно было бы ещё приличный кусок кода вставлять.

Меня же интересовало лишь одно: проверка корректного ввода е-мейл, и блокировка кнопки от повторного использования.



Мотоциклы на продажу (б/у):

Модель Цена
Харлей Дэвидсон 25000
Кроссовый мотоцикл 10000
Мотоцикл Сузуки 15000
Футер

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

Назад

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru