Капча

Точечная капча, проверка на стороне клиента с помощью JavaScript и на стороне сервера с помощью PHP

Внешний вид:

Использование на стороне клиента (версия с использованием JQuery)

1. Необходимо подключить JQuery, captcha.css и captcha.js.
2. Тип кнопки в форме должен быть button, а не submit. Также необходимо добавить значение captcha_submit для атрибута class.

<form class="bform" method="post" action="form.php" onsubmit="return form_chk(this);">
  ...
  <button class="captcha_submit" type="button">Отправить</button>
</form>

Форма проверяется на стороне клиента функцией form_chk(), которая зависит от конкретного проекта.

Добавьте код JavaScript:

<script>
$('.bform').captcha({
  clicks: 3,
  url: 'captcha.php',
  tip: 'Пожалуйста, нажмите на изображения в указанном порядке',
  callback: function(){
    alert('Форма отправлена');
  },
});
</script>

Описание параметров:

• clicks: количество нажатий, которое должно совпадать между клиентом и сервером. Максимально можно нажать 4 раза.
• url: ссылка на файл с капчей.
• tip: текст подсказки.
• callback: функция, которая выполняется после успешной проверки перед отправкой формы.

Использование на стороне клиента (нативная версия JavaScript)

1. Нативный JavaScript без зависимостей, необходимо подключить captcha.css и captcha.pure.js.
2. Тип кнопки в форме должен быть button, а не submit. Также необходимо добавить значение captcha_submit для атрибута class.
3. В версии с нативным JavaScript можно использовать только селектор по id для тега <form>.
4. Версия с нативным JavaScript включает в себя собственный код для AJAX, поэтому файлы могут быть большими.

<form id="bform" method="post" action="form.php" onsubmit="return form_chk(this);">
  ...
  <button class="captcha_submit" type="button">Отправить</button>
</form>

Проверка формы на стороне клиента осуществляется функцией form_chk().

Добавьте код JavaScript:

<script>
new Captcha({
  el: '#bform',
  clicks: 3,
  url: 'captcha.php',
  tip: 'Пожалуйста, нажмите на изображения в указанном порядке',
  callback: function(){
    alert('Форма отправлена');
  }
});
</script>

Описание параметров:

• clicks: количество нажатий, которое должно совпадать между клиентом и сервером. Максимально можно нажать 4 раза.
• url: ссылка на файл с капчей.
• tip: текст подсказки.
• callback: функция, которая выполняется после успешной проверки перед отправкой формы.

Использование на стороне сервера

Код для вызова captcha.php

require_once('class/captcha/captcha.class.php');
$CA = new Captcha();
$CA->captcha(3);

Проверка на стороне сервера в form.php

$captcha = $_POST['captcha'];
if(!$captcha){
    exit('Отсутствует капча');
}
require_once('class/captча/captcha.class.php');
$CA = new Captcha();
$captcha_check = $CA->captcha_check($captcha, $_SESSION['captcha_poi']);
if(!$captcha_check){
    exit('Неверная капча');
}

1. Метод Captcha() принимает один параметр, который указывает количество нажатий. Это значение должно совпадать на клиенте и сервере. Максимальное количество нажатий — 4.
2. Путь может потребовать изменения в зависимости от вашего проекта.
3. Код в файле form.php проверяет данные после отправки формы на сервер.

Дополнительные замечания

1. Изображения, используемые в качестве фона, взяты с сайта unsplash.com. Все изображения на этом сайте доступны бесплатно для использования без разрешения автора.