Ссылки

Поиск

 
Новости, Статьи
Форум
Файлы

Привет, Гость

Войти
Идентификация
Я забыл свой пароль
Регистрация

Обновления на форуме

Гадания на таро 0 >>
Блок новостей в виде блога 1 >>
Игры для сайта 34 >>
Сервис создания тестов 94 >>
Дед 1 >>

Последние статьи

Сайт для фирмы-изготовителя натяжных потолков 0
Антиспам «Я не робот» 0
За что воюет Украина и когда всё это кончится 12
Удаление родителя текущего элемента на jQuery 0
Простой аккордеон на jQuery №3 0

Регистрация на нашем сайте занимает меньше минуты и не требует проверки e-mail.

RSS фиды

RSS Статьи
RSS Клиентам
RSS Новости
RSS Файлы
RSS Форум

Разделы → Статьи → Разработка сайтов → Антиспам «Я не робот»

Стоит задача создать простейший антиспам для формы отправки писем, надёжно отсекающий спам-роботов.

Создание «антиспама» начнем с постановки задачи.

1. Система должна быть простой, осуществляющей проверку в 1 клик мышью.
— Более всего этому соответствует галочка «Я не робот».
2. Технология должна быть доступна для людей и не видна большинству спам-роботов.
— Галочку «Я не робот» добавим с помощью яваскрипта, так как он работает в браузере у человека и не работает у большинства спам-ботов.
3. Просмотр HTML кода страницы не поможет роботу найти антиспам-систему.
— Достаточно разбить добавляемый на страницу тег в виде строки на части — применив яваскрипт-оператор «плюс», добавив для затруднения анализа рандомно пробелы.

Этап первый.
Делаем форму отправки. Для добавления галочки перед кнопкой «Спросить» сделан контейнер с id="nerobot". После загрузки страницы яваскрипт сработает и добавит туда галочку «Я не робот»
Код: HTML

<form action="./#contact" method="post">

   <input type="hidden" name="question" value="true">

   <!--  Здесь можно добавить дополнительные поля  -->

   <input type="text" name="Name" placeholder="Имя" value="" />

   <input type="email" name="email" placeholder="Email" required="required" value=""/>

   <textarea placeholder="Введите Ваш вопрос" rows="6" name="text" required="required"></textarea>

    <div id="nerobot" class="box-desc form-inline"></div>

    <button type="submit" class="submit">Спросить</button>

</form>
Этап второй.
Пишем яваскрипт, я буду использовать jQuery.
В тег с id="nerobot" добавляем чекбокс с name="nerobot".
Попутно замусорим код тегами и неравномерыми разрывами с помощью яваскрипт-оператора «плюс». Это сильно затруднит анализ роботу.
Код: Javascript

<script type="text/javascript">

    $(document).ready(function() {

    $("#nerobot").append(' <table> < t'+'r><td><input id="sde"'+' type="check'+'box"   class="checkbox"  name="ner'+'obot" required></td><td><la'+ 'bel for="sde">Я н' +'е робот</label ></td></t' + 'r></table>');

    });

</script>
В конечном итоге после загрузки страницы форма будет выглядеть примерно так
Антиспам «Я не робот»

Этап третий — проверка на сервере, была ли отмечена галочка.
Очень просто — если на сайт зашёл человек, то он увидит галочку и отметит её.
Отправленные галочкой данные попадут в переменную $_POST['nerobot']. Если робот — галочки в коде нет, отметить не сможет.
Проверим на сервере, например, таким образом:
Проверка, установлена ли галочка «Я не робот», на сервере
Можно немного усложнить пример и сделать проверку «антиспама» в отдельной секции и вывести отдельную ошибку — как пожелаете, я думаю принцип понятен.

Возникшие вопросы задавайте в комментариях к статье. Не забывайте обрамлять код соответствующими тегами, форматированнный код проще читать.
13.07.2016 13:23 Автор/источник: Den1xxx

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

Вы не залогинены! Регистрация

Устал читать? Напиши! Или позвони +375 29 5344286. На связи по будним дням с 800 до 1700.