Простой валидатор форм

класс JavaScript для проверки входных данных html-формы

Почти все динамические сайты в том или ином виде используют онлайн-формы. Они могут быть необходимыми для регистрации новых пользователей, либо же при реализации функции «выслать другу», либо же просто для того, чтобы дать возможность прокомментировать понравившуюся статью. Во всех этих случаях данные вводятся в html-форму, и обычно тут же, для защиты от контент-спама, вас просят ввести символы, которые изображены на картинке. И как же иной раз бывает обидно, когда вы потрудились заполнить поле комментария своей гениальной репликой, ввели картинку, нажали «Отправить», и вдруг сайт сообщает вам про максимально возможную длину текста комментария или же выдает какую-нибудь другую ошибку. Хорошо, если программист позаботился о сохранении данных в перезагружаемой форме. Тогда вам просто еще раз придется разгадывать, что же написано на «защитной» картинке. Случается и так, что определенный мейл-сервис категорически не хочет принимать почту c некоторых доменов. Конечно, подсознательно начинаешь относиться к сайту, который не поддерживает работу с некоторыми почтовыми провайдерами, с недоверием, особенно после того, как попробовал зарегистрироваться и из этого ничего не вышло. Хорошо, если пользователь догадается, что это очередной «выбрык» почтовой системы и зарегистрируется с другого е-мейла. А ведь стоило бы разработчикам такого проекта призадуматься об удобстве пользования формами, встроив проверку отправляемых данных, которая бы не давала выполнить отправку до полного их заполнения. От такого простого дополнения веб-сайт станет только более привлекательным для ваших посетителей. Итак, сегодня речь пойдет о библиотеке от javascript-coder.com, которая предназначена для проверки данных, вводимых в произвольные формы.

Примеров, как может быть использована библиотека форм-валидатора, множество. Однако во всех применениях такого ПО просматривается одна общая черта. А именно: чем больше вставлено проверок и чем меньше вероятность того, что введенные в какую-либо форму данные придется вводить по новой, тем лучше впечатление от ресурса, на котором и расположены такие формы. И наоборот, единственная html-форма, заполнив которую пользователь получает сообщение об ошибке, может послужить сигналом о непрофессионализме разработчиков сайта и отпугнуть, например, того же потенциального клиента или же даже покупателя.

Конечно, существует масса нюансов, связанных с внедрением такой библиотеки на сайте. Однако в произвольном случае подключение сводится к банальной загрузке файла с расширением *.js в корень вашего веб-каталога и прописыванию его вызова внутри заголовка страницы в теге «head», например, следующим образом:
<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>

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

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

Вставляем код после закрытия формы

Проверка произвольной формы состоит в добавлении кода, который бы создавал проверяющий класс, и прописывании необходимых методов проверки. Лучше всего добавлять код валидатора сразу после тега закрытия формы, то есть </form>.

Вот пример простейшей формы, при отправке которой проверяется верность заполнения поля с е-мейлом:
<html>
<head>
<script  type="text/javascript"  src="validator.js"></script>
</head>
<body>
<form  name=mypageform>
e-mail:  <input  name="email"><br>
<input  type=submit  value="Отправить">

</form>
<script  language="JavaScript">
  var  frmvalidator    =  new  Validator("mypageform");
  frmvalidator.addValidation("email","email","Введите  корректный  е-мейл");
  frmvalidator.addValidation("email","req","Заполните  поле  е-мейл");
</script>

</body>
</html>

Проверка е-мейла

Как видите, идея организации правил проверки в этом JavaScript-классе основана на добавлении разнообразных методов, основанных на так называемых текстовых дескрипторах. Иначе говоря, с помощью специального метода класса валидатора, который как бы заполняет массив критериев верности данных формы, передается набор параметров. Один из них задает название проверяемого поля формы, второй — тип проверки, а третий — ту строку, которую пользователь увидит при несовпадении данных в поле и критерия.

Для этого используется следующая функция класса javascript-валидатора:

addValidation("имя поля","дескриптор","текст");

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

Дескрипторы сравнения

Для проведения анализа введенных в форму данных используется несколько стандартных дескрипторов. Приведем их полный список, который запрограммирован в текущей версии библиотеки:

req (required) — данный текстовый параметр, будучи переданным во втором аргументе метода addValidation, устанавливает обязательность наличия данных в указанном поле. Конечно, данное утверждение означает то, что поле, которое объявляется обязательным, должно быть текстового типа;
maxlen=число, minlen=число — вот таким образом указываются границы длины текста, введенного в поле;
alnum — строка обязана содержать латинские символы и цифры. Этот дескриптор очень удобен для анализа верности вводимых логинов;
alnum_s — аналогично предыдущему, однако строка может включать пробелы, «табы» и прочие «пустые» символы;
num — данные в указанном поле должны быть числового типа;
alpha (alpha_s) — только латинская строка (латинская строка c пробелами);
lt=число, gt=число — определяется, что числовые данные меньше (больше), чем число;
regexp=выражение — таким образом описывается соответствие маске регулярного выражения;
dontselect=индекс — этот дескриптор указывает, что элемент выпадающего списка должен быть выбран. На то, что в выпадающем меню выбран элемент, указывает отличие ео значения (атрибут value тега option) от параметра, который указан в описании дескриптора (индекс);
dontselectchk/shoultselectchk — эти два параметра работают с html-флажками, таким образом, можно добиться того, что форма будет загружена только в том случае, если указанный чекбокс сброшен (ну или же установлен);
selone_radio — в группе «радиокнопок» должно быть выбрано по крайней мере одно значение.

В принципе такой набор условий сравнений гарантирует то, что можно будет обработать почти что любое значение, занесенное в поле ввода. В том случае, если все-таки необходимо сделать специфическую проверку, которая не описана стандартными дескрипторами, в класс можно добавить собственную функцию проверки. Делается это с помощью вызова метода setAddnlValidationFunction("имя  вашей  JavaScript-функции"). Такая возможность будет очень полезна в том случае, если вам необходимо проверить соответствие пароля и его подтверждения в форме регистрации. Следующая ситуация может быть запрограммирована следующим образом:
<html>
<head>
<script  type="text/javascript"  src="validator.js"></script>
</head>
<body>
<form  name="mypageform">
пароль:  <input  name="pass1"  type="password"><br>
подтверждение  пароля:  <input  name="pass2"  type="password"><br>
<input  type=submit  value="Отправить">

</form>

<script  language="JavaScript">

function  _passVerify()
{
    var  pform  =  document.forms["mypageform"];
    if(  pform.pass1.value  !=  pform.pass2.value  )
    {
        alert('Пароль  и  его  подтверждение  не  совпадают!');
        pform.pass2.focus();
        return  false;
    }
    else
        return  true;
}


  var  frmvalidator    =  new  Validator("mypageform");
frmvalidator.addValidation("pass1","minlen=4","Введите  пароль  длиной  не  менее  пяти  символов");
  frmvalidator.addValidation("pass1","maxlen=25","Слишком  длинный  пароль");
  frmvalidator.setAddnlValidationFunction(  "_passVerify"  );
</script>

</body>
</html>

Валидация паролей

В предыдущем примере в класс добавляется новая проверка, основанная на пользовательской функции _passVerify(). Эта функция сверяет значения, которые введены в поля, пароля и его подтверждения.

Обратите внимание на то, что при присвоении для одного поля нескольких критериев проверки логический результат умножается. То есть если для поля указывается минимальная и максимальная длина, то строка должна быть в диапазоне, который указан этими двумя дескрипторами, что соответствует «от 4 до 25 символов» для предыдущего примера.

В заключение

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