Привет, друзья! В этом руководстве вы узнаете, как создать код проверки в HTML и Javascript. Существуют различные способы создания капчи, такие как Google ReCaptcha и другие капчи и т. д.
Также читайте: Добавление маркера на Карты Google с помощью Maps Javascript API и HTML
Логика кода капчи в HTML и Javascript
- Прежде всего, мы вызовем функцию с обработчиком события javascript onclick в поле ввода капчи, чтобы сгенерировать 4-значный случайный код капчи. Код капчи загрузится автоматически при открытии страницы. Каждый раз после нажатия кнопки обновления будет генерироваться капча.
- Теперь мы будем использовать обработчик события javascript onsubmit для HTML-формы для проверки капчи. Предположим, что если пользователь нажимает кнопку отправки без ввода кода проверки, то функция в обработчике события отправки вернет false, то есть она предотвратит отправку HTML-формы, и пользователю будет показано сообщение об ошибке.
- Если вы введете неправильную капчу, вы получите сообщение об ошибке, в противном случае вы получите уведомление об успешном вводе правильной капчи.
Также необходимо отключить копирование текста из поля капчи, чтобы капчу нельзя было скопировать. Для этого добавьте приведенные ниже строки кода внутрь тега script.
// Disable right click on web page
$("html").on("contextmenu",function(e){
return false;
});
// Disable cut, copy and paste on web page
$('html').bind('cut copy paste', function (e) {
e.preventDefault();
});
Примечание. Не забудьте включить ссылку jquery CDN в тег заголовка, иначе вы не сможете отключить функцию копирования текста.
HTML: –
<!DOCTYPE html> <html lang="en"> <head> <title>Captcha Code</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body onload="generateCaptcha(event);"> <div class="container mt-3" style="width:50%;"> <h2>Captcha Code in HTML and Javascript</h2> <form action="/action_page.php" method="post" onsubmit="return validateForm()" name="myForm"> <div class="mb-3 mt-3"> <label for="email" class="fw-bold">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email" name="email"> </div> <div class="mb-3"> <label for="pwd" class="fw-bold">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd"> </div> <div class="mb-3"> <label for="pwd" class="fw-bold">Captcha:</label> <div class="row"> <div class="col-sm-10"> <input type="text" name="maincaptcha" readonly class="form-control" id="mainCaptcha"/> </div> <div class="col-sm-2"> <button class="btn btn-success btn-sm" onclick="generateCaptcha(event);" id="refresh"><i class="fa fa-refresh" style="font-size:17px"></i></button> </div> </div> </div> <div class="mb-3"> <label for="pwd" class="fw-bold">Enter Captcha:</label> <div class="row"> <div class="col-sm-10"> <input type="text" name="checkcaptcha" class="form-control" id="txtInput"/> </div> </div> </div> <div class="mb-3"> <span id="error" style="color:red;"></span> <span id="success" style="color:green;"></span> </div> <button type="submit" class="btn btn-primary btn-sm">Submit</button> </form> </div> <script type="text/javascript"> //for captcha function generateCaptcha(event) { event.preventDefault(); var alpha = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'); var i; for (i=0;i<4;i++){ var a = alpha[Math.floor(Math.random() * alpha.length)]; var b = alpha[Math.floor(Math.random() * alpha.length)]; var c = alpha[Math.floor(Math.random() * alpha.length)]; var d = alpha[Math.floor(Math.random() * alpha.length)]; } var code = a + '' + b + '' + '' + c + '' + d; document.getElementById("mainCaptcha").value = code var el = document.getElementById('mainCaptcha'); el.style.fontFamily = 'Geneva, Verdana, sans-serif'; el.style.fontSize = 'large'; } //validate the form function validateForm() { let x = document.forms["myForm"]["checkcaptcha"].value; let y = document.forms["myForm"]["maincaptcha"].value; if (x == "") { document.getElementById('error').innerHTML = "Please enter the captcha."; return false; } if(x!==y){ document.getElementById('error').innerHTML = "Captcha does not match."; return false; } if(x===y){ document.getElementById('error').innerHTML = ""; alert("Captcha entered successfully"); return true; } } // automatically generate captcha after page laod $(window).on('load', function () { generateCaptcha(event); }); // Disable right click on web page $("html").on("contextmenu",function(e){ return false; }); // Disable cut, copy and paste on web page $('html').bind('cut copy paste', function (e) { e.preventDefault(); }); </script> </body> </html>
Заключение. Я надеюсь, что это руководство поможет вам понять концепцию кода проверки подлинности. Если есть какие-либо сомнения, пожалуйста, оставьте комментарий ниже.
