Проверка данных HTML-формы с помощью JavaScript

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

Для начала посмотрим, как можно получить доступ к форме HTML-документа. На одной странице может быть несколько HTML-форм, и в JavaScript получить доступ к какой-либо форме можно с помощью массива document.forms, который и содержит все формы HTML-документа. Так получить объект формы можно по его номеру n на странице

Код

obj_form=document.forms[n];

Узнать общее количество форм на странице можно с помощью свойства length

Код

num_forms=document.forms.length;

Получить объект формы можно также и с помощью его имени, заданного атрибутом name в теге <form>, и используя конструкцию document.forms.nameForm или document.forms["nameForm"]. Например

Код

<form name="dataGuest">
...
</form>
...
<script type="text/javascript">
obj_form=document.forms.dataGuest;
/*
//или
obj_form=document.forms["dataGuest"];
*/
</script>

Также можно получить доступ к форме, используя идентификатор id в теге <form> следующим образом

Код

<form id="dataGuestId">
...
</form>
<script type="text/javascript">
obj_form=document.getElementById("dataGuestId");
</script>

Форма отправляется браузером при клике мышью по кнопке "Отправить" (<input type="submit" value="Отправить">) или при нажатии клавиши Enter в текстовом поле, созданным с помощью тега INPUT. Перед отправкой формы нам нужно проверить значения, содержащиеся в полях формы, а затем либо прервать процесс отправки, с выводом сообщения пользователю, если данные введены не должным образом, либо продолжить отправку, если данные заполнены пользователем корректно. Перехватить отправку формы при клике мышью по кнопке "Отправить" можно с помощью обработчика событий onClick в теге INPUT. Если обработчику вернуть значение false с помощью оператора return

Код

то форма отправлена не будет. Но при перехвате отправки формы по щелчку на кнопке "Отправить", мы не перехватим отправку формы при нажатии клавиши Enter в текстовом поле. Перехватить отправку формы в любом случае можно используя, обработчик события onSubmit в теге <form>, который также отменит отправку формы, если ему с помощью оператора return вернуть значение false. Для проверки данных определим функцию в обработчике событий onSubmit тега <form>, а отправить форму можно методом submit(), который есть у каждого объекта формы, следующим образом

Код

obj_form=document.forms.dataGuest;
obj_form.submit();

Доступ к элементам формы, создаваемым с помощью тегов INPUT, SELECT, TEXTAREA можно получить несколькими способами. Можно задать каждому тегу свой идентификатор id, и по нему определять объект элемента формы. Можно элементу формы задать имя с помощью атрибута name, и определить объект элемента как свойство объекта формы. Например

Код

<form name="dataGuest">
...
<input type="text" name="pole1">
</form>
<script type="text/javascript">
obj_form=document.forms.dataGuest;
obj_pole1=obj_form.pole1;
</script>

Так же у объекта формы есть массив elements (obj_form.elements), который содержит все элементы данной формы. Узнать общее количество элементов формы можно, используя свойство length (obj_form.elements.length). Получить объект элемента формы можно по его номеру n в форме, например

Код

obj_element=obj_form.elements[n];

Для примера осуществим проверку данных формы гостевой книги, которая будет иметь поля "Имя", "E-mail", "Сайт" и "Сообщение". Причем поля "Имя" и "Сообщение" обязательны для заполнения. И поэтому, если они не заполнены, выводим сообщение об ошибке пользователю и прерываем отправление формы. Также введем фильтр на длину сообщения, например, длина сообщения должна быть не менее 10 символов. Если длина сообщения будет менее 10 символов, то выводим пользователю сообщение о данной ошибке и прерываем отправку формы.

Код

<form name="dataGuest" onSubmit="provDataGuest(); return(false);" action="newmessage.php" method="post">
<table><tr><td>Имя</td><td><input type="text" name="name_user" value=""></td></tr>
<tr><td>E-mail</td><td><input type="text" name="email_user" value=""></td></tr>
<tr><td>Сайт</td><td><input type="text" name="site_user" value=""></td></tr>
<tr><td>Сообщение</td><td><textarea name="message_user"></textarea></td></tr>
<tr><td> </td><td><input type="submit" value="Отправить" name="submit_user"></td></tr></table>
</form>

Форма написана, осталось написать функцию provDataGuest(), которая будет проверять данные введенные в поля. Значение текстового поля (то есть введенный текст), можно найти в свойстве value объекта элемента формы.

Код

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

Предыдущие статьи

Новости сайта

Разработан модуль "Облако тегов"
Облако тегов позволит проще и быстрее находить ... полностью
Разработан модуль новостей на RSS
Теперь можно быть в курсе всех изменений на ... полностью
Добавлен новый раздел "Полезное"
В новом разделе "Полезное" будут публиковаться ... полностью

Также интересно будет посмотреть

Плюс Текст - веб-сервис для тех, кто регистрирует в ручную сайты в белых каталогах или размещает объявления.