Проверка данных в формах. Часть 2
Довольно часто возникает необходимость проверки, правильно ли заполнена форма,
не осталось-ли пустых полей. Конечно, это можно сделать на стороне сервера, но
это отнимает некоторое время. Сегодня рассмотрим способ как осуществить проверку
на локальной машине с помощью JavaScript.
Для начала рассмотрим основные принципы организации выполнения каких-либо действий
при нажатии на кнопку отправки формы (Submit button). Предположим, что у нас имеется
форма, в которой еще не реализована проверка:
<FORM NAME="test1" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали">
</FORM>
Для того, чтобы перед тем, как данные формы были отправлены на сервер, были
произведены некоторые действия необходимо переписать последний элемент ввода следующим
образом:
<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">
Функция checkIt() должна возвратить значение true,
если все в порядке и false если данные не прошли проверку. Причем, необходимо
обратить внимание на сопособ вызова этой функции в обработчике событий. Значение,
выданное, функцией должно быть передано обратно в обработчик, чтобы стандартная
процедура оптправки данных была выполнена.
Теперь рассмотрим, как мы можем получить доступ к полям формы из скрипта. Для
этого используется массив document.forms.formName. Доступ к полям может
быть осуществлен несколькими способами: по имени поля (атрибут NAME) - document.forms.test1.user или document.forms.test1["user"], по индексу - document.forms.test1[0]. Каждое поле имеет свойство
value, которое содержит введенное значение.
Исходя из вышеизложенного, реализация процедуры проверки нашей формы может
выглядеть так:
function checkIt() {
if (document.forms.test2.user.value != "") {
return true; // все отлично
} else {
alert("Поле 'имя' должно быть заполнено!");
return false;
}
}
А форма будет выглядеть следующим образом:
<FORM NAME="test2" ACTION="test.php3">
Имя: <BR>
<INPUT TYPE="Text" NAME="user" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR>
e-mail: <BR>
<INPUT TYPE="Text" NAME="eMail" SIZE="20" MAXLENGTH="30" TABINDEX="1"><BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Поехали" ONCLICK="return checkIt()">
</FORM>
Информация
взята с сайта "Опыты"