Валидация форм на стороне клиента

Я предположу, что вы уже читали некоторые статьи о методах проверки правильности форм, и со стороны клиента и со стороны сервера, но этот метод имеет несколько новое направление в данной теме. То, о чем я собираюсь рассказать, это – включение объектно-ориентируемого программирования в проверку правильности форм. Этот метод работает с браузерами, которые поддерживают 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"
pattern="[^A-Za-z]+" errorMsg="Недопустимый символ в имени" />

Эквивалентый класс на Java:

public class Input
{
 String type = "text";
 String name = "firstname";
 String size = "20";
 String maxsize = "20"; 
 String pattern = "[^A-Za-z]+";
 String errorMsg = "Недопустимый символ в имени";
}

Часто приходится писать функции для каждого вводного поля, которое необходимо подвергнуть проверке. Но сделая 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;
  var offendingChar = value.match(pattern);

Если мы встретим недопустимое значение, то сформируем сообщение об ошибке:

  str += elements.item(i).getAttribute('errorMsg') + "\n" +
         "Недопустимый символ в имени: '" + offendingChar + "' \n";

Для того, чтобы дать пользователю дополнительную подсказку, давайте изменим цвет бэкграунда поля, содержащего недопустимое значение (хочу заметить, что это не работает в Опере, но не вредит работе).

  elements.item(i).style.background ="red"; 

Внимательный читатель может заметить, что value в elements.item[i].value представлен как объект. Но может ли он быть доступен с помощью elements.item(i).getAttribute('value')? Нет, это только показывает значение по умолчанию (если есть такое) в теге, но не значение, введенное пользователем!

Вспомогательные функции

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

function DOMCheck() {
  if(!document.getElementsByTagName('html')) {
    alert("Извините! Ваш броузер не поддерживает W3C HTML DOM!");
  }
}

Эта функия проверяет, есть ли элемент html. Обратите внимание, что если <html> теги опущены, Internet Explorer будет отдавать страницу как HTML, но значение, возвращенное сценарием будет равняться нулю, таким образом давая неправильное сообщение об ошибке. Поэтому, будьте добры и всегда включайте <html> теги в ваш документ.

Во-вторых, мы должны очистить цвет фона, когда пользователь вводит новое значение в input-теги:

function changeColor(th) {
  //заменяем цвет фона на белый
  th.style.background = "white";
}

Обратите внимание, что это не работает в Опере. Этот метод вызывается из input-тега, используя обработчик события onfocus.

Исходный код

Законченный вариант кода функции валидации нашей формы выглядит так:

function validate() {
  var str = "";
  var elements = document.getElementsByTagName('input');
  // цикл по всем элементам формы
  for(var i = 0; i < elements.length; i++) {
    // проверяем, имеется ли образец 
    var pattern = elements.item(i).getAttribute('pattern');
    if (pattern != null) {
      var value = elements.item(i).value;
      // валидация значения элемента, используя образец
      var offendingChar = value.match(pattern);
      // если встечен недопустимый символ или элемент оставлен пустым
      if(offendingChar != null || value.length == 0) {
        // показываем сообщения об ошибках
        str += elements.item(i).getAttribute('errorMsg') + "\n" +
        "Найдено недопустимое значение: '" + offendingChar + "' \n";
        // подсказка пользователю путем смены цвета фона; здесь красный
        elements.item(i).style.background = "red"; 
      }
    }
  } 
  if (str != "") {
    // не посылаем форму
    alert("ERROR ALERT!!\n" +str); 
    return false;
  } else {
    // значения формы правильны; посылаем
    return true;
  }
}

Дальнейшие расширения

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

Возраст: <input type="text" name="age" maxlength="2" size="2" 
min_reqs="18" max_reqs="30" 
errorMsg="Возраст должен быть в пределе 18-30 лет" />

Используя ту же самую идею, общий код валидации может быть использован для всех input-тегов, которые используют максимальное/минимальное значения, добавляя тем самым определенную логику (в пределах функции валидации) этому элементу ввода.

  var min_reqs = elements.item(i).getAttribute('min_reqs');
  var max_reqs = elements.item(i).getAttribute('max_reqs');
  if (min_reqs != null && max_reqs != null) {
    var value = elements.item(i).value;
    if (value < min_reqs || value > max_reqs) {
      str += elements.item(i).getAttribute('errorMsg') + '\n';
    }
  }

Заключение

Стоит ли идти этим путем? Возможно не сейчас, но в самом ближайшем будущем, когда все или большинство пользователей будут использавать современные браузеры. Безусловно есть и другие выгоды от наличия объединенной модели объектов (DOM) для браузеров, но надеюсь этот небольшой совет поможет некоторым веб-мастерам сделать себе жизнь более легкой.

Ссылки по теме:
Internet Explorer 6, Part I: DOM Standards Support
Regular Expressions

Внимание!
Перед появлением сообщения на сайте, оно пройдет премодерацию.