Архив месяца: Декабрь 2020

Защита формы обратной связи от спама на PHP и JavaScript

Спам не пройдет

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

Защита формы от спама. Теория

Что бы будем делать?

  • Добавим к форме input с типом hidden и пустым значением (value)
  • По нажатию на кнопку отправки данных формы будем подставлять какое-то значение в скрытый input
  • На стороне сервера примем данные из скрытого инпута
  • Сделаем проверку. Если значение скрытого поля не равно тому, что мы в него передали через JS, то форма отправлена не будет.

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

Защита контактной формы от спама. Практика

<input type="hidden" name="code" value="" id="code"/>

В JavaScript пишем следующее:

1
2
3
4
let code = document.querySelector('#code'); // Получаем скрытый input
  document.querySelector('.btn').onclick = function(){ // Клик по кнопке отправки
    code.value = 'NOSPAM'; // Подставляем значение в value инпута
  };

После клика скрытое поле будет выглядеть примерно так:

<input type="hidden" name="code" value="NOSPAM" class="code"/>

Теперь сделаем проверку на PHP.

1
2
3
if ($_POST['code'] != 'NOSPAM') {
  exit;
}

На этом защиту от спама можно было бы завершить, но как быть с движками типа WordPress? Для CMS существует огромное количество плагинов по защите от различного рода взломов, атак и спама, но при желании можно внедрить и этот способ, но это тема для отдельной статьи или целого видео-урока. Возможно в ближайшее время я выпущу материал на эту тему. А какие способы защиты от спама знаете вы?

Как сделать ограничение вода символов в input на JavaScript

Ограничить ввод символов в input

Здравствуйте. Когда н сайте есть форма для отправки каких-то данных и она содержит больше одного поля, то часто в эти поля вводят совсем не то, что мы ожидаем от пользователя. Иногда в поле Имя могут написать целое предложение, которое выглядит, как спам. В таких случаях стоит ограничить ввод символов в input, чтобы хоть как-то дать понять пользователю, что этого делать не стоит. На JavaScript установить ограничение на ввод символов очень просто. Буквально одной строчкой кода. И для этого есть целых 3 функции, которые мы сейчас рассмотрим. Но для начала предлагаю посмотреть пример в действии.

Демо

1
2
3
4
let name = document.querySelector('#name');
name.oninput = function(){
  this.value = this.value.substr(0, 15);
}

Предположим, что наш input имеет ID — name. Внесем его в одноименную переменную и запустим событие oninput, которое будет срабатывать после изменения этого поля.

this.value — значение нашего инпута
this.value.substr(0, 15) — Функция, которая ограничит ввод на 15 символов.
Функция substr(start, length) принимает в себя 2 параметра. 1 — с какого индекса начинать отсчет и 2 — на какую длину.

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

this.value = this.value.substring(0, 15);

И

this.value = this.value.slice(0, 15);

Как видите, ограничить ввод символов в input совсем не сложно. Но это только на стороне клиента, то есть сработает только в браузере пользователя, если у него включен JS. Иногда еще идет автоматическая рассылка спама специальными скриптами в обход такой защиты. В этом случае нужно делать дополнительную проверку и ограничивать длину строки на стороне сервера. Об этом мы поговорим с вами в другой раз, но вы можете прочитать материал на мему того, как обрезать текст по количеству слов и символов в PHP.

Как запретить ввод символов в Input на JavaScript

Запрет ввода символов на JS

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

1
2
3
4
5
6
let name = document.querySelector('#name'); // Получаем input
let regex = /[0-9]/g; // регулярка только цифры
 
name.oninput = function(){
    this.value = this.value.replace(regex, '');
  }

На этом можно было бы завершить, так как все, что было нужно, мы сделали, но давайте разберем этот пример более детально. В первой строке мы вносим в переменную name наш input с id name. Во второй строке в переменную regex занесли то самое регулярное выражение, которое и является основой нашей программы. На четвертой строке мы на инпут вешаем событие oninput, при котором будет срабатывать встроенная в JavaScript функция замены replace, которая принимает в себя два параметра. Первый — что она будет заменять и второй — на что. В нашем случае символы из регулярного выражения мы заме6няем на пустую строку. Другими словами, если мы попробуем напечатать цифры, то они просто не будут отображаться. Проверьте сами.

Демо

Как вы уже, наверное, догадались делать замену можно не только на пустоту, но и на любые другие символы. К примеру можно поставить звездочку. И тогда все символы, как при вводе пароля, будут закрыты звездочками. Точно так же, как при input type=»password»

this.value = this.value.replace(regex, '*');

Если вам моя писанина на тему того, как запретить ввод символов в Input на JavaScript, была не совсем понятна, то предлагаю посмотреть на эту тему видео.