Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по JavaScript

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

Имея на сайте форму, будь то добавление комментариев или просто гостевая книга мы всегда хотим, чтобы пользователи вводили во все поля правильные данные. Например, мы хотим, чтобы в поле имя вводились не более 10 символов, а электронный адрес был вида [email protected] Сделать такую мини проверку и предупредить об ошибке можно при помощи небольшой функции на 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 типа [email protected]");
return;
}
if (txt.indexOf(".") == -1) { //проверяем существование символа .
alert("Введите корректный E-mail типа [email protected]");
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 · Просмотров: 174

Рекомендую
  • Currently 5.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 5.0/5 (всего 1 голос)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (1)

12
ФСБ    Добавлено: 29-09-2010 в 22:31
отличный урок!!!
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

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


 
34