главная

Теги:


Капча с использованием jQuery

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

В данном уроке описывается еще один способ быстрого и простого определения человечности того, кто заполняет форму. Идея заключается в том, чтобы расставить в правильном порядке с помощью мыши квадратики с цифрами. Данный метод использует jQuery и UI jQuery. Для того, чтобы метод работал, нужно, чтобы пользователь разрешил в браузере использование JavaScript.

Разметка HTML

captcha.html


    
		
        
        
        
		
        
		
        
    
    
        
О себе
Данные профиля
Давайте проверим вашу человечность
Расставьте по порядку
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
Отправить

В разделе заголовка страницы подключаются все необходимые библиотеки, наш код JavaScript в файле captcha.js и файл стилей style.css.

В самом коде определяется форма с набором полей. Интерес представляет элемент div captcha_war, который содержит неупорядоченный список элементов, используемых для нашего теста. Они будут трансформироваться скриптом.


CSS

css/style.css

*{
	margin:0;
	padding:0;
}

body{
     background-color: #2daebf;
}
form.registration{
     width:600px;
     margin: 10px auto;
     padding:10px;
     font-family: "Trebuchet MS";   
}
form.registration fieldset{
     background-color:#707070;
     border:none;
     padding:10px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -moz-border-radius: 15px;
     -webkit-border-radius: 15px;				          
     padding:6px;
     margin:0px 30px 0px 0px;
}
form.registration legend{
     text-align:left;
     color:#fff;
     font-size:14px;
     padding:0px 4px 15px 4px;
     margin-left:20px;
     font-weight:bold;
}
form.registration label{
     font-size: 18px;
     width:200px;
     float: left;
     text-align: right;
     clear:left;
     margin:4px 4px 0px 0px;
     padding:0px;
     color: #FFF;
     text-shadow: 0 1px 1px rgba(0,0,0,0.8);
}
form.registration input{
     font-family: "Trebuchet MS";
     font-size: 18px;
     float:left;
     width:300px;
     border:1px solid #cccccc;
     margin:2px 0px 4px 2px;
     color:#00abdf;
     height:26px;
     padding:3px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
}
form.registration input:focus, form.registration select:focus{
     background-color:#E0E6FF;
}
form.registration select{
     font-family: "Trebuchet MS";
     font-size: 20px;
     float:left;
     border:1px solid #cccccc;
     margin:2px 0px 2px 2px;
     color:#00abdf;
     height:32px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
}
.button, .button:visited{
     float:right;
     background: #2daebf url(images/overlay.png) repeat-x; 
     font-weight:bold;
     display: inline-block; 
     padding: 5px 10px 6px; 
     color: #fff; 
     text-decoration: none;
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     border-bottom: 1px solid rgba(0,0,0,0.25);
     cursor: pointer;
     margin-top:95px;
     margin-right:15px;
}
.button:hover{
     background-color: #007d9a; 
}
#sortable {
     list-style-type: none;
     margin: 5px 0px 0px 16px;
     padding: 0;
}
#sortable li {
     margin: 3px 3px 3px 0;
     padding: 1px;
     float: left;
     width: 35px;
     height: 35px;
     font-size: 20px;
     text-align: center;
     line-height:35px;
     cursor:pointer;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
     -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     background:#2daebf url(images/overlay.png) repeat-x scroll 50% 50%;
     color:#fff;
     font-weight:normal;
}
.captcha_wrap{
     border:1px solid #fff;
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     float:left;
     height:120px;
     overflow:auto;
     width:150px;
     overflow:hidden;
     margin:0px 0px 0px 210px;
     background-color:#fff;
}
.captcha{
     -moz-border-radius:10px;
     -webkit-border-radius:10px;
     font-size:12px;
     color:#BBBBBB;
     text-align: center;
     border-bottom:1px solid #CCC;
     background-color:#fff;
}

Файл стилей достаточно простой. Мы активно используем свойства CSS3 для придания особенного шарма элементам формы (тени, скругленные углы, прозрачность).

JavaScript

js/captcha.js

(
       function($){
            $.fn.shuffle = function() {
               return this.each(function(){
                   var items = $(this).children();
                    return (items.length)
                       ? $(this).html($.shuffle(items,$(this)))
                   : this;
               });
           }
            $.fn.validate = function() {
               var res = false;
               this.each(function(){
                   var arr = $(this).children();
                   res =    ((arr[0].innerHTML=="1")&&
                       (arr[1].innerHTML=="2")&&
                       (arr[2].innerHTML=="3")&&
                       (arr[3].innerHTML=="4")&&
                       (arr[4].innerHTML=="5")&&
                       (arr[5].innerHTML=="6"));
               });
               return res;
           }
            $.shuffle = function(arr,obj) {
               for(
               var j, x, i = arr.length; i;
               j = parseInt(Math.random() * i),
               x = arr[--i], arr[i] = arr[j], arr[j] = x
           );
               if(arr[0].innerHTML=="1") obj.html($.shuffle(arr,obj))
               else return arr;
           }
        })(jQuery);
        $(function() {
           $("#sortable").sortable();
           $("#sortable").disableSelection();
           $('ul').shuffle();
            $("#formsubmit").click(function(){
               ($('ul').validate()) ? alert("Приветствую тебя, землянин!") : 
               alert("Терминаторов на нашем сайте не обслуживают!");
           });
});

Код JavaScript тоже весьма прост за счет использования UI jQuery, котрый берет на себя организацию перемещения элементов с помощью мыши.

При загрузке страницы элементы неупорядоченного списка смешиваются с помощью функции shuffle. А обработчик события click для кнопки "Отправить" с помощью функции validate проверяет порядок расстановки элементов и выводит соответствующее сообщение.


Заключение

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

Источник урока: tympanus.net/codrops/2009/09/08/jquery-fancy-draggable-captcha/
 

Урок Создан:2011-02-08 Просмотров:6968

Добавить комментарий:


Copyright© 2009 Hosted by Zhost