Еще одна статья о проверке формы на стороне клиента

Проверка на стороне клиента с использованием JavaScript не является чем-то новым, верно? Но можно использовать HTML DOM и расширить поля ввода с помощью специализированных атрибутов. Читай дальше!

Я предполагаю, что вы уже прочитали кучу статей по проверке формы, как на стороне клиента, так и на стороне сервера, но в этой статье есть новый поворот по этому вопросу. Здесь я собираюсь показать, как включить некоторые объектно-ориентированные программы в проверку формы. Так в чем же подвох? Этот совет работает с браузерами, поддерживающими JavaScript и HTML DOM от W3C, такими как Internet Explorer 6, Netscape 6 и Opera 6 и, в некоторой степени, более ранние версии. Хотя я не тестировал Konqueror, но, согласно спецификациям, он должен работать хорошо.

Справедливое предупреждение: вам нужно быть достаточно опытным с JavaScript, чтобы следовать этой статье.

Теги и объекты

Каждая форма имеет несколько входных тегов, которые обычно имеют атрибуты name и value. Текстовые поля также могут иметь размер и максимальный размер. В этой статье я добавил еще несколько атрибутов, которые вы обычно не найдете: pattern и errorMsg . Эти атрибуты нестандартны, но это не мешает браузерам. Для поклонников объектно-ориентированного программирования эти атрибуты действуют как члены класса, в данном случае класс является входным тегом.

Обычный входной тег:

 <input type="text" name="firstname" size="20" maxsize="20" /> 

Модифицированный входной тег:

 <input type="text" name="firstname" size="20" maxsize="20"  pattern="[^A-Za-z]+" errorMsg="Invalid charcter found in firstname" /> 

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

 public class Input {  String type = "text";  String name = "firstname";  String size = "20";  String maxsize = "20";  String pattern = "[^A-Za-z]+";  String errorMsg = "Invalid character found in firstname";  } 

Часто вам нужно написать функции для каждого поля ввода, которое вы хотите проверить. Но благодаря тому, что каждый входной тег «осведомлен» о его соответствии шаблону и сообщении об ошибке, код проверки гораздо проще написать. Фактически, в такой установке можно использовать универсальное решение, которое можно использовать для любого значения, которое можно описать с помощью регулярных выражений (для краткости RegExps). Ссылки на регулярные выражения см. В конце этой статьи.

DOM (объектная модель документа)

Большинство атрибутов представлены как объекты в DHTML, но эти добавленные атрибуты — нет. Таким образом, чтобы получить значения, нам нужно использовать DOM (ссылки на DOM приведены в конце в списке ресурсов). Полная HTML-страница, как и в DHTML, называется document . Одним из методов, доступных для документа, является getElementsByTagName(String) . Этот метод используется для поиска всех входных тегов:

 var elements = document.getElementsByTagName('input'); 

Если бы elements были обычным JavaScript-объектом, можно было бы догадаться, что это будет массив, содержащий все входные теги. Но не в DOM: здесь это NodeList . В отличие от массива, в котором элемент myarray[i] , в NodeList есть коллекция items (например, elements.item(i) ).

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

 for (var i = 0; i < elements.length; i++) { 

Но теперь пришло время для атрибута pattern:

   var pattern = elements.item(i).getAttribute('pattern'); 

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

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

   var value = elements.item(i).value;  var offendingChar = value.match(pattern); 

   str += elements.item(i).getAttribute('errorMsg') + "n" +         "Found this illegal value: '" + offendingChar + "' n"; 

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

 function DOMCheck() {  if(!document.getElementsByTagName('html')) {    alert("Sorry! Your browser does not support the W3C HTML DOM!");  }  } 

 function changeColor(th) {  //'resets' the background-color to white  th.style.background = "white";  } 

 function validate() {  var str = "";  var elements = document.getElementsByTagName('input');   // loop through all input elements in form  for(var i = 0; i < elements.length; i++) {     // check if element is mandatory; ie has a pattern    var pattern = elements.item(i).getAttribute('pattern');    if (pattern != null) {      var value = elements.item(i).value;       // validate the value of this element, using its defined pattern      var offendingChar = value.match(pattern);       // if an invalid character is found or the element was left emtpy      if(offendingChar != null || value.length == 0) {         // add up all error messages        str += elements.item(i).getAttribute('errorMsg') + "n" +               "Found this illegal value: '" + offendingChar + "' n";         // notify user by changing background color, in this case to red        elements.item(i).style.background = "red";      }    }  }   if (str != "") {    // do not submit the form    alert("ERROR ALERT!!n" +str);    return false;  } else {    // form values are valid; submit    return true;  }  } 

 Age: <input type="text" name="age" maxlength="2" size="2"      min_reqs="18" max_reqs="30" errorMsg="Age must be 18-30 years" /> 

   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';    }  }