CB's blog

(X)HTML формы – довольно важная часть веб-дизайна и веб-программирования. В этой заметке я попробую рассказать о проверке данных, которые вводятся пользователями в формы. Лично я вижу 3 способа проверки:

Первый – послать все данные, на сервер и проверять все скриптом непосредственно перед записью в БД. Например так.

Второй – после submit’а формы проверять данные JavaScript’ом, и если данные неправильные то отменять submit, как это делают здесь.

Третий – фильтрация ввода в текстовые поля форм. Звучит необычно, но на самом деле все довольно просто. Идея (и часть кода) взята с сайта Mauzon и после некоторых небольших доработок, кстати согласованных с автором, я думаю, пора написать о нем более-менее подробно.

Вот весь код JavaScript (можно сохранить в файл, например keyfilter.js и потом подключить в документе):

var isIE = (document.all) ? 1 : 0;

function keyFilter(e, strPattern)
{
   var chr = (isIE) ? e.keyCode : e.which;
   var ch = String.fromCharCode(chr);

   if (chr != 13 && chr != 8 && chr != 0)
   {
      var re = new RegExp(strPattern);

      if (ch.search(re) == -1)
      {
         if(isIE)
          e.returnValue = false;
         else
          e.preventDefault();
      }
   }
}

HTML-часть выглядит примерно так:

<input type="text" name="num" onkeypress="keyFilter(event,'[0-9]')" />

<input type="text" name="name" onkeypress="keyFilter(event,'[А-Яа-я]')" />

В первом случае для ввода допускаются только цифры, во втором - русские буквы. Как видно, второй аргумент функции keyFilter - regexp, регулярное выражение, более подробно можно узнать тут.

Теперь, когда у нас есть общая картина, мы можем смешивать вышеописанные три метода в нужных нам пропорциях в зависимости от конкретных задач.

Ну и ложечка дегтя. Существенным недостатком keyFilter’a есть его медлительность. Впрочем, попробовать стоит.

P.S. Это моя первая запись в моем первом блоге так что не будьте слишком строгими .