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


Абстрактный контроль форм
Предыдущий пример показывает, что может оказаться полезным написание общих программ контроля ввода. Вместо создания одинаковых или очень похожих функций для проверки каждого поля всех форм узла можно создать библиотеку функций проверки данных, которые легко добавить к страницам. Чтобы действительно допускать повторное использование, такие функции не должны быть жестко привязаны к именам форм и полей. Функции контроля данных не должны извлекать данные для проверки по имени, скорее данные должны предаваться таким функциям для проверки. Это позволит добавлять такие функции в любую страницу и применять их к любой форме, используя минимальную "привязку" с помощью обработчиков событий, передающих этим функциям значения нужных полей.
Функции контроля данных форм должны обеспечивать нечто большее, чем гарантия того, что поля не останутся пустыми. Типичные возможности проверки обеспечивают гарантии того, что значением поля является, например, целым числом, числом из определенного диапазона, числом определенного вида (например, значением почтового индекса или идентификационным кодом), что значение содержит только определенные символы (например, только буквы), является чем-то похожим на адрес электронной почты или номер кредитной карточки. Многие задачи проверки, в частности, адресов электронной почты или номеров кредитных карточек оказываются совсем нетривиальными. Простая схожесть введенного адреса электронной почты с действительным адресом совсем не означает, что введенный адрес действителен на самом деле. Ниже мы представим варианты проверки адресов электронной почты и различных числовых значений в качестве демонстрации возможностей применения общих программ контроля.

Замечание. Регулярные выражения являются непревзойденным инструментом проверки данных форм, поскольку позволяют выполнить проверку вводимых данных с помощью достаточно малого по объему программного кода. Без регулярных выражений нам пришлось бы выписывать сложный программный код для анализа данных вручную. Мы собираемся сопоставить "ручной" подход с возможностями использования регулярных выражений. Обратите внимание, насколько регулярные выражения упрощают проверку данных.

Многие формы используются для сбора адресов электронной почты, и желательно обнаружить возможные проблемы предъявляемых адресов до их отправки серверу. К сожалению, достаточно трудно гарантировать даже то, что предъявленный адрес имеет допустимую форму. В общем случае об адресе электронной почты можно сказать только то, что он имеет вид userid@domain, где userid является строкой, a domain — строкой, содержащей точку. "Истинные" правила того, что представляет собой действительный адрес электронной почты, на самом деле исключительно сложны, поскольку они должны распознавать устаревшие форматы почтовой адресации, адреса IP и различные маргинальные случаи. Из-за широкого разнообразия форматов адресов электронной почты многие программы проверки обычно ищут просто нечто подобное формату строка@строка. Если уж быть совершенно точными, то возможно даже отсутствие точки в правой части адреса электронной почты! Предлагаемая ниже функция проверяет введенные в поле данные на предмет того, что они похожи на действительный адрес электронной почты.

function isEmail (field)
{
var positionOfAt;
var s = field.value;
if (isEmpty(s))
{
alert("Адрес не должен быть пустым");
field.focus ();
return false;
}
positionOfAt = s.indexOf('@',1);
if ( (positionOfAt == -1) И (positionOfAt == (s.length-1)) )
{
alert("Адрес имеет недопустимый формат!");
field.focus ();
return false;
}
return true;
}

Можно записать это в более элегантной форме, используя регулярные выражения:

function isEmail (field)
{
var s = field.value;
if (isEmpty(s))
{
alert("Адрес не должен быть пустым");
field.focus ();
return false;
}
if (/[^@]+@[^@]+/.test(s))
return true;
alert("Адрес имеет недопустимый формат!");
field.focus ();
return false;
}

Используемое здесь регулярное выражение должно читаться как "один или нескоко символов, отличных от @, за которыми следует @ и один или несколько символов, отличных от @". Очевидно, можно задать более ограничительные условия, чем те, которые предлагаются выше. Например, использование регулярного выражения /[^@] +@(\w+\.)+\w+/ оказывается более предпочтительным. Указанному шаблону соответствуют строки, состоящие из символов (например, "John"), за которыми следует @, одна или несколько последовательностей символов слов, заканчивающиеся точками (например, "mail.yahoo.") и еще несколько символов слов (например, "соm").
Проверка чисел не является трудной задачей. Можно искать цифры и даже проверить, принадлежит ли введенное число допустимому диапазону. Следующие процедуры показывают, как именно это делается:

function isDigit(c)
{
return ((с >= "0") && (с < "9"))
// Версия с использованием регулярного выражения:
// return /^\d$/.test(c);
}

Ввиду того что процедура isDigit () исключительно проста, версия с использованием регулярного выражения выглядит здесь не намного лучше. Но давайте рассмотрим более сложный пример:

function islnteger(s)
{
var i=0, с;
if (isEmpty(s))
return false;
if (s.charAt(i) == "-")
i++;
for (i =0; і < s.length; i++)
{
// Проверка того, что все символы оказываются числами
с = s.charAt(і);
if (!isDigit(c))
return false;
}
return true;
}

В этом случае версия с регулярным выражением гораздо более элегантна:

function islnteger(s)
{
return /^-?\d+$/.test(s);
}

Используемое здесь регулярное выражение следует читать так: в самом начале строки может присутствовать знак "минус", за которым следуют одна или несколько цифр вплоть до конца строки.

Замечание. Не менее элегантным было бы использование функции isInteger (), передающей строковые данные функции parseint () и проверяющей, является ли возвращенное значение значением NaN.

Поскольку регулярные выражения полезны только при сопоставлении с образцом, и некоторых ситуациях их польза оказывается весьма ограниченной:

function isIntegerlnKange (s,min,max)
{
if (isEmpty(s))
return false;
if (!islnteger(s))
return false;
var num = parseInt (s);
return ((num >= min) && (num < max));
}


Внедрение процедур контроля данных

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Демонстрация типичной процедуры проверки формы</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
var validations = new Array();
// Определение необходимого типа проверки. Каждый элемент массива содержит поле формы для проверки, и выполняется соответствующая процедура проверки. При использовании сценария на новой странице требуется подкорректировать только эту часть программы!

validations[0]=["document.myform.username", "notblank"];
validations[1]=["document.myform.useremail", "validemail"];
validations[2] =["document.myform.favoritenumber", "isnumber"];

// Настройка массива для использования на странице.
function isEmpty(s)
{
if (s == null || s.length == 0)
return true;

// Проверка возвращает true, если есть хотя бы один символ, отличный от символа пустого пространства, т.е. строка не пуста. Если проверка возвращает false, строка является пустой.
return !/\S/.test(s);
}

function looksLikeEmail (field)
{
var s = field.value;

if (isEmpty(s))
{
alert("Адрес не должен быть пустым");
field.focus ();
return false;
}

if (/[^@]+@/w+/.test(s))
return true;
alert("Адрес имеет недопустимую форму.");
field.focus();
return false;
}

function islnteger (field)
{
var s = field.value;
if (isEmpty(s))
{
alert("Поле не должно оставаться пустым");
field.focus();
return false;
}

if (! (/^-?\d+$/.test(s) ) )
{
alert("Поле должно содержать только цифры");
field.focus();
return false;
}
return true;
}

function validate ()
{
var i;
var checkToMake;
var field;

for (i =0; і < validations.length; i++)
{
field = eval(validations[i][0]);
checkToMake = validations[i][1];
switch (checkToMake)
{
case 'notblank': if (isEmpty (field.value))
{
alert("Поле не должно быть пустым");
field.focus();
return false;
}
break;
case 'validemail': if (! looksLikeEmail (field))
return false;
break;
case 'isnumber': if (! islnteger (field) )
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="text" name="useremail" id="useremail" size="30" maxlength="90" />
<br />
Любимое число:
<input type="text" name="favoritenumber" id="favoritenumber" size="10" maxlength="10
<br />
<input type="submit" уа1ие="0тправить" />
</form>
</body>
</html>

Приятным моментом является то, что достаточно просто привязать такие процедуры к любой странице. Просто разместите сценарий на странице, настройте массив validations[ ], чтобы он содержал поля формы, которые требуется контролировать, и строки, указывающие тип выполняемой проверки, и добавьте вызов validate () в качестве обработчика onsubmit для формы. Отделение механизмов проверки данных (функций проверки) от политики контроля (полей для проверки и типов контроля) открывает возможность повторного использования процедур и ведет к уменьшению затрат в долгосрочной перспективе.

Контроль данных формы посредством скрытых полей

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

<input type="hidden" name="имяполя_check" value ="проедураПроверки"
<input type="hidden" name="имяполя_еrrоrmsg" value="сообщение на случай неудачного завершения проверки">

Можно определить скрытые поля формы для каждого проверяемого элемента. Так чтобы проверить, не осталось ли поле с именем username пустым, можно использовать

<input type="hidden" name="username_check" value="непусто">
<input type="hidden" name="username_errormsg" value="Следует указать имя пользователя">


Чтобы проверить адрес электронной почты, можно использовать

<input type="hidden" name="email_check" value="дeйcтвитeльныйAдpec">
<input type="hidden" name="email_errormsg" value="Следует указать действительный адрес электронной почты">

Теперь необходимо создать цикл по скрытым полям отправляемой формы, рассматривая поля вида имяполя_check. При выявлении такого поля можно использовать программы анализа строк, чтобы выяснить имя поля и выполнить соответствующую проверку. Если проверка завершается неудачей, можете легко отобразить соответствующее сообщение об ошибке, получив доступ к полю имяполя_еrrоrmsg.

Замечание. Основная причина того, что применение скрытых полей оказывается более элегантным по сравнению с другими подходами, — возможность простого доступа серверной стороны к передаваемым скрытым значениям для выполнения аналогичных проверок. Такая двойная проверка может показаться пустой тратой времени, но на самом деле это повышает безопасность, поскольку невозможно быть полностью уверенным в том, что проверка JavaScript со стороны клиента действительно выполнялась.

Независимо от метода, который вы выберете, подход оказывается полезным, если он позволяет выделить функции проверки JavaScript в файлы .js, чтобы на них можно было ссылаться с любой страницы, содержащей формы. Но прежде чем создавать собственные процедуры проверки данных, вспомните о многочисленной армии разработчиков, которым уже приходилось решать такие задачи. Соответствующий програмный код уже имеется в Web, так что лучше начать создание своего программного кода проверки данных с уже имеющихся библиотек. Например, загляните на страницу http://developer.netscape.com/docs/examples/javascript.html, где можно найти образцы сценариев.
назад:
далее:


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


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

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


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







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