суббота, 5 февраля 2011 г.

Клиентская и серверная валидация

Одна из наиболее частых задач в web-разработке - создание форм и проверка их на корректность вводимых данных. Для того чтобы это все было более юзабильно, есть специальный jQuery Validation Plugin. Этот плагин позволяет на стороне клиента, проверять форму на корректность вводимых данных, соответственно не требуется перезагрузка страницы.

Чтобы облегчить создание форм в web-приложениях, существуют различные библиотеки. Одна из них HTML_QuickForm2 и ее доработка jQuickForm которая должна была подружить, этот построитель форм с jQuery Validation Plugin. Вышло на мой взгляд не плохо, но слишком наворочено. К тому же автор давно не развивал это дополнение, последний раз когда я скачивал этот пакет, не работала клиентская валидация, а ведь изначально именно для этого и был разработанн этот пакет.

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

У всех этих "помошников" построителей форм, есть минусы - 1. Необходимо разбиратся с интерфейсами классов, как правило, сделано удобно, разобраться можно быстро 2. Сложности кастомизации, изменения дизайна форм 3. Все эти надстройки жрут ресурсы

После размышлений над этим, я создал небольшой класс, который занимается только валидацией, правила задаются аналогично jQuery Validation Plugin. Объект этого класса создает необходимый код JS для валидации на стороне клиента (если нужно) и также проверяет формы на стороне сервера по тем же правилам. Привожу пример -


<?php
header("Content-Type: text/html; charset=utf-8");
require 'valid/Valid.php';
require 'valid/ValidLang.php';

$oValid = new Valid($l);
$oValid->addRule('login', 'required');
$oValid->addRule('login', 'minlength', 5);
$oValid->addRule('pass', 'required');
$oValid->addRule('pass', 'minlength', 5);
$oValid->addRule('re_pass', 'equalTo', 'pass');
$oValid->addRule('email', 'required');
$oValid->addRule('email', 'email');

if (isset($_POST['login'])) {
   if ($oValid->check()) {
       // Здесь можно проверить дополнительно, на повторный логин и мыло например
       echo 'Валидация успешна';
       // Сохраняем данные, редиректим если надо
   }
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
       <title>Valid - mini validator</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     
       <link rel="STYLESHEET" type="text/css" href="css/eform.css">
       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
       <script type="text/javascript">
               !window.jQuery && document.write('<script src="js/jquery-1.4.3.min.js"><\/script>');
       </script>
       <script type="text/javascript" src="js/jquery.validate.pack.js"></script>
       <script type="text/javascript" src="js/jquery.form.js"></script>
   </head>
 
<body>

<form action="index.php" method="post" name="reg_form" id="reg_form" class="eForm">
   <fieldset>
       <legend><?php echo $l['index']['registration']; ?></legend>
       <p>
           <label for="login"><?php echo $l['index']['login']; ?></label>
           <input type="text" id="login" name="login" value="<?php echo $oValid->getReq('login');?>" />
           <?php echo $oValid->getErr('login');?>
       </p>
       <p>
           <label for="pass"><?php echo $l['index']['pass']; ?></label>
           <input type="password" id="pass" name="pass" value="" />
           <?php echo $oValid->getErr('pass');?>
       </p>
       <p>
           <label for="re_pass"><?php echo $l['index']['re_pass']; ?></label>
           <input type="password" id="re_pass" name="re_pass" value="" />
           <?php echo $oValid->getErr('re_pass');?>
       </p>
       <p>
           <label for="email"><?php echo $l['index']['email']; ?></label>
           <input type="text" id="email" name="email" value="<?php echo $oValid->getReq('email');?>" />
           <?php echo $oValid->getErr('email');?>
       </p>
       <p>
           <input type="submit" value="<?php echo $l['index']['registration']; ?>" class="noresize submit"/>
       </p>
   </fieldset>
</form>

<?php echo $oValid->getJS('reg_form'); ?>

</body>
</html>

Пример реализации можно посмотреть в моем mini MVC framework, там уже реализована регистрация, авторизация - mFram

Комментариев нет:

Отправить комментарий