![]() Если Вы видите здесь эту рекламу, значит увидят и Вашу рекламу... |
Валидация форм на стороне клиентаDenveroid Проверка форм на стороне клиента с использованием JavaScript ни для кого не является новым изобретением. Но использование технологии HTML DOM возможно является таковым для многих людей. Заинтересовал? Тогда вперед! Я предположу, что вы уже читали некоторые статьи о методах проверки правильности форм, и со стороны клиента и со стороны сервера, но этот метод имеет несколько новое направление в данной теме. То, о чем я собираюсь рассказать, это – включение объектно-ориентируемого программирования в проверку правильности форм. Этот метод работает с браузерами, которые поддерживают JavaScript и HTML DOM от W3C, типа Internet Explorer 6, Netscape 6 и Opera 6, и в некоторой степени более ранние версии. Хотя я не проверял Konqueror, но судя по его спецификациям это должно работать нормально и в нем тоже. Предупреждение: вы должны быть относительно опытными в работе с JavaScript, чтобы полностью понять суть статьи. Теги и объектыКаждая форма представляет собой набор input-тегов, которые обычно имеют аттрибуты name и value. Текстовые поля ввода могут также иметь аттрибуты size и maxsize. В этой статье я добавил еще пару аттрибутов, которые вы не часто встретите: pattern и errorMsg. Эти аттрибуты не являются стандартными, но они не мешают работе броузеров. В объектно-ориентируемом программировании эти аттрибуты ведут себя подобно членам класса, а классом в этом случае является input-тег. Обычный input-тег: <input type="text" name="firstname" size="20" maxsize="20" /> Модифицированный input-тег: <input type="text" name="firstname" size="20" maxsize="20" Эквивалентый класс на Java: public class Input Часто приходится писать функции для каждого вводного поля, которое необходимо подвергнуть проверке. Но сделая input-тег «осведомленным» о его соответствии образцу и сообщению об ошибках, мы добиваемся более простого написания кода валидации. Фактически, это общее решение, которое может использоваться для любого значения, описанного регулярными выражениями (регэкспы). Более подробно о регулярных выражениях вы сможете узнать, посетив сайты, ссылки на которые приведены в конце статьи. DOM (Объектная модель документа)Большинство аттрибутов представлены как объекты в DHTML, но эти добавленные аттрибуты - нет. Поэтому, для того чтобы иметь возможность получить значения мы должны использовать DOM (ссылки по теме в конце статьи). Законченная HTML страница , как и в DHTML, называется document. Один из методов, доступных документу - getElementsByTagName(String). Этот метод используется для того, чтобы найти все input-теги: var elements = document.getElementsByTagName('input'); Если бы elements был обычным объектом в JavaScript, то это был бы обычный массив, содержащий все input-теги. Но не в DOM: здесь это NodeList. В отличие от простого массива, элементом которого является myarray[i], NodeLists имеет совокупность элементов item (например elements.item(i)). Можно пройтись по всем элементам массива, используя простой цикл for: for (var i = 0; i < elements.length; i++) { Настало время для аттрибута pattern: var pattern = elements.item(i).getAttribute('pattern'); Мы должны заставить образец этого поля смочь его (поле) проверить. В этой статье только необходимые элементы имеют аттрибут образца (проверка правильности, как всегда, выполняется регэкспами). Поэтому, мы берем значение из поля ввода и проверяем, все ли символы соответствуют образцу. Другими словами, мы ищем «неправильные» символы. var value = elements.item(i).value; Если мы встретим недопустимое значение, то сформируем сообщение об ошибке: str += elements.item(i).getAttribute('errorMsg') + "\n" + Для того, чтобы дать пользователю дополнительную подсказку, давайте изменим цвет бэкграунда поля, содержащего недопустимое значение (хочу заметить, что это не работает в Опере, но не вредит работе). elements.item(i).style.background ="red"; Внимательный читатель может заметить, что value в elements.item[i].value представлен как объект. Но может ли он быть доступен с помощью elements.item(i).getAttribute('value')? Нет, это только показывает значение по умолчанию (если есть такое) в теге, но не значение, введенное пользователем! Вспомогательные функцииЕсть две маленьких функции, которые я еще не упомянул. Во-первых, мы должны удостовериться, что браузер может обрабатывать наш сценарий: function DOMCheck() { Эта функия проверяет, есть ли элемент html. Обратите внимание, что если <html> теги опущены, Internet Explorer будет отдавать страницу как HTML, но значение, возвращенное сценарием будет равняться нулю, таким образом давая неправильное сообщение об ошибке. Поэтому, будьте добры и всегда включайте <html> теги в ваш документ. Во-вторых, мы должны очистить цвет фона, когда пользователь вводит новое значение в input-теги: function changeColor(th) { Обратите внимание, что это не работает в Опере. Этот метод вызывается из input-тега, используя обработчик события onfocus. Исходный кодЗаконченный вариант кода функции валидации нашей формы выглядит так: function validate() { Дальнейшие расширенияЭта идея относительно добавления признаков может быть далее расширена аттрибутами типа минимальных и максимальных значений. Скажем, что регэкспами уже не обойтись, и мы должны по-другому квалифицировать данные значения: Возраст: <input type="text" name="age" maxlength="2" size="2" Используя ту же самую идею, общий код валидации может быть использован для всех input-тегов, которые используют максимальное/минимальное значения, добавляя тем самым определенную логику (в пределах функции валидации) этому элементу ввода. var min_reqs = elements.item(i).getAttribute('min_reqs'); ЗаключениеСтоит ли идти этим путем? Возможно не сейчас, но в самом ближайшем будущем, когда все или большинство пользователей будут использавать современные браузеры. Безусловно есть и другие выгоды от наличия объединенной модели объектов (DOM) для браузеров, но надеюсь этот небольшой совет поможет некоторым веб-мастерам сделать себе жизнь более легкой. Ссылки по теме: Источник: http://sitemaker.ru/
|
Copyright © "Internet
Zone", info@izcity.com
Копирование и использование данных материалов разрешается только в случае указания на журнал "Internet Zone", как на источник получения информации. При этом во всех ссылках обязательно явное указание адреса вэб-сайта http://www.izcity.com/. При наличии у копируемого материала авторов и источника информации - их также нужно указывать, наряду со ссылкой на нас. Подробнее условия использования материалов смотрите здесь. |