Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по JavaScript / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Проверка формы с помощью JavaScript

Имея на сайте форму, будь то добавление комментариев или просто гостевая книга мы всегда хотим, чтобы пользователи вводили во все поля правильные данные. Например, мы хотим, чтобы в поле имя вводились не более 10 символов, а электронный адрес был вида name@mail.ru. Сделать такую мини проверку и предупредить об ошибке можно при помощи небольшой функции на javascript, которая будет «перехватывать» данные из формы и проверять их.

Для начала создадим саму форму, в которой будет имя и email пользователя, текст сообщения ну и кнопка отправки:

<form name="Guest" onSubmit="provGuest(); return(false);" action="newmessage.php" method="post">
Имя<br>
<input
type="text" name="name" value=""><br>
E-mail<br>
<input
type="text" name="email" value=""><br>
Сообщение<br>
<textarea
name="message"></textarea><br>
<input
type="submit" value="Отправить" name="submit">
</form>

Параметр onSubmit и будет передавать данные нашей функции provGuest, написанную на javascript. А теперь займемся самой функцией.

<script type="text/javascript">
function provGuest() {
obj_form=document.forms.Guest;
obj_pole_name =obj_form.name;
obj_pole_email =obj_form.email;
obj_pole_message =obj_form.message;


if (obj_pole_name.value==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
alert ("Напишите свое имя!");
return;
}
txt = obj_pole_email.value;
if (txt==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
alert ("Напишите Ваш E-mail!");
return;
}
if (txt.indexOf("@") == -1) { //проверяем существование символа @
alert("Введите корректный E-mail типа name@mail.ru");
return;
}
if (txt.indexOf(".") == -1) { //проверяем существование символа .
alert("Введите корректный E-mail типа name@mail.ru");
return;
}
textMessage=obj_pole_message.value;
if (textMessage==""){ //если в поле нет текста, то выводим сообщение об этом пользователю
alert ("Напишите сообщение!");
return;
}
if (textMessage.length<10){
alert ("Длина сообщения должна быть не менее 10 символов");
return;
}
//все обязательные данные введены, поэтому отправляем форму
obj_form.submit();
}
</script>

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

Автор: Евгений Бочкарев Урок добавлен: 18 Августа 2010 в 15:30 Просмотров: 18162

Условия копирования материалов сайта

Все комментарии
#-3 ФСБ 29-09-2010 в 22:31
отличный урок!!!
#-2 Евгений 29-03-2011 в 09:17
Думаю что для проверки мыла лучше использовать регулярные выражения. Уже много есть готовых.
#-1 Анна 23-02-2013 в 12:07
Всем привет! Кто-нибудь может подсказать,как поставить себе на сайт форму проверки имей,как тут,например http://s-url.ro/
#0 GREMLIN 13-04-2013 в 20:07
А как сделать что бы сообщение выводилось в поле input
#1 Стас (програмист-самоучка) 30-05-2014 в 17:15

<p style="color:Green"> Круто! </p> <p> А можно <ins> БЕЗ .php <ins> ? Я ещё не проходил, да и лень - сейчас JavaScript больно интересует! </p>


#2 Евгений 10-01-2015 в 19:58
GREMLIN, если в той же форме, то должно быть вместо alert'ов

document.forms.Guest.name.value = "текст ошибки";


или какой нужен input вместо name
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки