Мне нравится XML. Я действительно. Тем не менее, мои глаза смотрят так же, как и у следующего человека, когда я слышу о том, как это замечательно. Это может быть замечательно, но как веб-разработчик, как мне помогает XML?
Я использую XHTML на своем сайте, но это не дает никаких преимуществ сверх тех, которые я получил бы, используя HTML. У меня есть RSS-рассылка, но это приносит пользу моим читателям, а не мне.
Пришло время быть эгоистичным. Пришло время спросить: «Как XML может помочь мне? Как я могу использовать его, чтобы упростить создание веб-страниц?»
Концепция
Одна область, которая всегда раздражает меня при создании веб-страниц, это проверка формы. Даже если вы разрабатываете библиотеку функций для проверки страницы, всякий раз, когда вы создаете новую форму, вам нужно либо создать новый внешний файл JavaScript с соответствующим набором переменных, либо включить их в саму страницу. Это можно и нужно сделать лучше.
SitePoint опубликовал несколько статей (« Прочитайте и отобразите XML на стороне сервера с помощью JavaScript и XML и JavaScript в Mozilla» ) о загрузке XML-файла с помощью JavaScript, но ни одна из них не содержала подробных практических преимуществ этой технологии. Я думаю, что он идеально подходит для обеспечения полной проверки веб-форм.
Идея состоит в том, что вместо того, чтобы включать эти беспорядочные переменные во внешний файл JavaScript, мы можем создать словарь XML, загружая эти специальные файлы XML, чтобы указать ограничения, которые мы накладываем на наши формы.
Заповеди
При создании словаря XML я хотел бы помнить несколько правил. Словарь должен быть:
- просто
- Легко понятно
- краткий
Между этими понятиями существует значительное совпадение, но я чувствую, что все они достаточно важны для индивидуального выражения. Словарь должен быть простым, чтобы его было легко создавать и анализировать. Это должно быть легко понятно, чтобы любой, кто не знаком с ним, мог взглянуть на него и, по крайней мере, сделать обоснованное предположение о том, что он делает. Это должно быть кратким, чтобы сократить ненужные опечатки и опечатки.
Самое важное соображение, которое я стараюсь учитывать при разработке JavaScripts, — это ненавязчивый DHTML. Вы должны иметь возможность связать внешний JavaScript-файл со своей страницей и заставить его работать. Это облегчает работу авторам страниц, которым не нужно задумываться о добавлении элементов на страницу, а также побуждает авторов создавать страницы, которые будут работать должным образом без включенного JavaScript — это всесторонняя победа.
XML
Когда я начал проектировать формат XML, я определенно решил выбрать простоту, а не понятность. Следовательно, в этом примере вы не найдете валидации различных полей формы, работающих вместе, например даты. Кроме того, формат не поддерживает элементы управления формы, кроме наиболее распространенных текстовых вводов. Это определенные возможности для будущих расширений скрипта, но ради простоты они пока не учтены. По тем же причинам поддержка валидации предоставляется только для одной формы на страницу.
Чтобы JavaScript знал, какую форму нужно подключить, чтобы иметь возможность перехватить событие отправки формы, корневой элемент <form> имеет id атрибута. Внутри <form> находится последовательность тегов <element> , каждый из которых определяет правила для одного ввода текста.
Существует два типа тегов <element> . Один тип имеет атрибут sameas , который устанавливается равным id другого <element> . Это используется для указания того, что элемент является значением подтверждения, таким как пароль подтверждения или адрес электронной почты.
Другой основной тип <element> имеет последовательность атрибутов. Атрибут id — это указатель на элемент формы, для которого он определяет правила и является обязательным. Другим обязательным атрибутом является атрибут name , который используется при автоматической генерации сообщений об ошибках.
Необязательные атрибуты: min , задающие минимальное количество символов, и max задающие максимальное количество. Отсутствие любого из них не накладывает ограничений на верхнее или нижнее количество символов. Оставив оба, означает, что ввод может содержать любое количество символов. Другим необязательным атрибутом является req , который имеет значение true или false и указывает, должен ли ввод заполняться или нет.
Внутри <element> может быть введена серия из 0 или более тегов <regex> , определяющих шаблоны, которым вход должен соответствовать хотя бы одному. Если текст в поле не соответствует ни одному из шаблонов, содержимое элемента <error> , также дочернего <element> тега <element> , указывает сообщение об ошибке, которое будет использоваться. JavaScript автоматически генерирует сообщения об ошибках для других условий.
JavaScript
Я не хочу вдаваться в подробности сценария, так как это избыточная информация, утомительно скучная, и все части, которые относятся к импорту XML, в любом случае были рассмотрены в другом месте. Посмотрите пример — все файлы можно скачать здесь .
По сути, этот скрипт проверяет, может ли браузер обрабатывать импорт XML-файлов. Если это возможно, он импортирует XML, а затем выполняет другую функцию, которая анализирует недавно импортированный XML. Если он не может обработать импорт XML-файла, функция возвращается, и браузер ничего не делает.
Чтобы найти имя файла XML-файла для импорта, JavaScript получает URL-адрес текущей страницы и заменяет текущее расширение файла на .xml. Итак, если ваша страница называется myform.html, связанный XML-файл должен называться myform.xml.
Если браузер импортировал XML, он теперь захватывает все теги <element> и создает массив объектов ElementValidator , которым присваивается их узел как часть их конструктора. Я решил использовать объекты вместо функций и массивов, потому что я чувствовал, что объекты лучше соответствуют различным данным, которые охватывают валидаторы, и наличие методов вместо внешних функций обеспечивает чистоту глобального пространства имен. Концептуально также имело больше смысла заставить элемент знать, как проверить себя.
Когда валидатор создан, его соответствующему элементу присваивается функция onblur которая проверяет его действительность, как только пользователь перестает работать над ним и фокусируется в другом месте. Это означает, что пользователи получают мгновенную обратную связь, если что-то было введено неправильно. Чтобы улучшить обратную связь с пользователем, в родительский элемент неправильного ввода формы добавлен класс ошибок, а в документ вставлен текст с объяснением того, что пользователь сделал неправильно. Это было сделано в форме ошибок упрощенной формы Kalsey Consulting .
Когда форма отправлена, функция JavaScript запускает все объекты валидатора, заставляя их проверять их действительность. Если какой-либо из объектов недопустим, отправка формы прекращается, и пользователю выдается окно с предупреждением, в котором ему предлагается просмотреть введенные данные.
Конечно, если у пользователя отключен JavaScript или он не использует Mozilla или Internet Explorer версии 5 или выше, они не увидят никаких сообщений об ошибках немедленно, и им придется ждать, пока сервер вернет им свои ошибки.
Вывод
Вот вам и это — быстрый и простой способ привести XML в соответствие и помочь вам. Это полезное и быстрое средство вставки проверки формы на ваши страницы. Может быть, этого будет даже достаточно, чтобы я прекратил прогуливаться и использовал проверку формы на моем собственном сайте. Ты никогда не узнаешь.
Каковы преимущества и недостатки этого метода?
Преимущества, на мой взгляд, таковы:
- Ненавязчивый — никаких изменений в структуре вашей страницы не требуется, кроме вставки JavaScript и, возможно, нескольких идентификаторов здесь и там.
- Легко изменить — если вы обнаружите ошибку в какой-либо из ваших проверок или обнаружите, что что-то, что раньше не требовало проверки, теперь делает, вы можете быстро обновить файл XML и снова загрузить его на свой веб-сайт.
- Удобный для пользователя — когда пользователи вводят неправильное значение в поле формы, они получают информацию, очевидно и немедленно.
Недостатки:
- Совместимость — В настоящее время этот код работает только в IE 5+ и Mozilla.
- Ограниченный — для простоты это решение в настоящее время поддерживает только текстовые вводы. Конечно, любой желающий может расширить текущий сценарий до более сложных процедур проверки формы, если пожелает.
Я надеюсь, что я расширил ваш кругозор по возможностям использования XML для улучшения ваших веб-страниц — или, по крайней мере, я дал вам новый хитрый способ проверки формы для добавления в набор инструментов.
Подтверждения
Страница « Импорт XML» Питера-Пола Коха была очень полезна для предоставления рабочего сценария, который требовал лишь небольшой модификации.
Функция Скотта Эндрю addEvent (найденная через Саймона ) также помогла ускорить процесс .
Наконец, страница событий DHTML Майка Холла спасла мое здравомыслие, когда я боролся с различными моделями событий в Mozilla и Internet Explorer.