Добавляем...


Проверка корректности данных, вводимых в формы
Одной из самых полезных возможностей, которые можно реализовать с помощью JavaScript, является возможность контроля вводимых в форму данных, позволяющая гарантировать правильность заполнения формы. Контроль содержимого формы перед отправкой данных серверу сохраняет процессорное время сервера и сокращает время ожидания пользователем информации о правильности введенных данных. В этом разделе предлагается обзор типичных подходов к решению задачи конт данных, вводимых в формы.
Первым вопросом для рассмотрения в области контроля данных форм являеться вопрос о контроле ошибок заполнения формы. При этом контроль ошибок можно водить в следующие моменты.
  1. Перед тем как происходит ошибка (чтобы не допустить совершения ошбки).
  2. Вовремя ошибочных действий.
  3. После того как происходит ошибка.
Как правило, данные формы проверяют после завершения ввода, непосредственно перед отправкой запроса. Обычно за такую проверку отвечает обработчик собитий onsubmit, содержащий набор функций контроля данных. Если поле содержит неподходящие данные, отображается соответствующее сообщение, и отправка данных отменяется по причине возвращения false обработчиком событий. Если же вы ясняется, что поля формы заполнены правильно, программа-обработчик возвращает true и отправка данных формы продолжается в нормальном режиме.
Рассмотрим следующий небольшой пример, в котором выполняется проверка, гарантирующая, что соответствующее поле не пусто:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.citd">
<html>
<head>
<title>Простейший вариант проверки формы</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
function validate()
{
if (document.myform.username.value == "")
{
alert("Должно быть указано имя пользователя");
return false;
}
return true;
}
//-—>
</script>
</head>
<body>
<form name="myform" id="myform" method="get" action="http://www.javascriptref.com/" onsubmit="return validate();">
Имя пользователя:
<input type="text" name="username" іd="username" size="30" />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

Этот пример имеет множество недостатков. Во-первых, поле проверяется недостаточно надежно. Единственный пробел уже оказывается приемлемым для успешного прохождения проверки. Во-вторых, проверка является недостаточно абстрактной — она работает только с полем username в данном документе и неприменима полю общего вида. Наконец, контроль данных не приводит к передаче фокуса полю, котором обнаружена ошибка. В этом смысле следующий пример значительно лучше, поскольку в нем указанные недостатки исправлены:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Более совершенный вариант проверки данныхx</title>
<meta http-equiv="content-type" ntent="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
//Определение символов пустого пространства :
var whitespace = " \t\n\r";
function isEmpty(s)
{
var i;
if((s == null) || (s.length == 0))
return true;
// Проверка строки на наличие символов, отличных от пробелов
for (і = 0; і < s.length; i++)
{
var с = s.charAt(i);
if (whitespace.indexOf(с) == -1)
return false;
}
// Здесь все символы являются символами пустого пространства.
return true;
}

function validate()
{
if (isEmpty(document.myform.username.value))
{
alert("Ошибка: необходимо указать имя пользователя.");
document.myform.username.focus();
return false;
}
if (isEmpty(document.myform.userpass.value))
{
alert ("Ошибка: пароль не должен быть пустым.");
document.myform.userpass.focus();
return false;
}
return true;
//-->
</script>
</head>
<body>
<form name="myform" id="myform" method="get"
action="http://www.javascriptref.com"
onsubmit="return validate();"> Имя пользователя: <input type="text" name="username" id="username" size="30" maxlength="60" />
<br />
Пароль:
<input type="password" name="userpass" id="userpass" size="8" maxlength="8" />
<br />
<input type="submit" value="Отправить" />
</form>
</body>
</html>

назад:
далее:


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


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







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика