Проверка формы с помощью 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 Просмотров: 21545