使用HTML,CSS和JavaScript创建CAPTCHA验证表单

如今,验证码已成为网站安全不可或缺的一部分。每天在线完成数百万个CAPTCHA测试。

如果您尚未在网站上实施CAPTCHA验证,则可能会对您造成很大的问题,使您成为垃圾邮件发送者的目标。

您需要了解有关验证码的所有信息,以及如何使用HTML,CSS和JavaScript在您的网站上轻松实现它们。

什么是验证码?

CAPTCHA代表“完全自动化的公共Turing测试,以区分计算机和人类。”这个名词是由路易斯·冯·安(Luis von Ahn),曼努埃尔·布鲁姆(Manuel Blum),尼古拉斯·霍珀(Nicholas J.Hopper)和约翰·兰福德(John Langford)在2003年创造的。这是一种挑战响应测试,用于确定用户是否为人类。

验证码通过提供僵尸程序难以执行但人类相对容易的挑战来增加网站的安全性。例如,对于机器人来说,从一组多个图像中识别汽车的所有图像是困难的,但对于人眼来说却足够简单。

CAPTCHA的思想源自图灵测试。图灵测试是一种测试机器是否可以像人一样思考的方法。有趣的是,可以将CAPTCHA测试称为“反向图灵测试”,因为在这种情况下,计算机会创建挑战人类的测试。

为什么您的网站需要验证码?

CAPTCHA主要用于防止漫游器自动提交包含垃圾邮件和其他有害内容的表单。甚至像Google这样的公司也使用它来防止其系统遭受垃圾邮件攻击。以下是您的网站可从验证码验证中受益的一些原因:

  • 验证码通过创建伪造的帐户来帮助防止黑客和僵尸程序向注册系统发送垃圾邮件。如果没有阻止,他们可以将这些帐户用于恶意目的。
  • 验证码可以禁止您网站上的暴力登录攻击,黑客利用这些攻击尝试使用成千上万的密码进行登录。
  • 验证码可以通过提供虚假评论来限制漫游器向审核部分发送垃圾邮件。
  • 由于有些人购买了大量的机票以进行转售,因此CAPTCHA有助于防止机票膨胀。验证码甚至可以防止错误注册以释放事件。
  • 验证码可以通过欺骗性评论和指向有害网站的链接来限制网络骗子向博客发送垃圾邮件。

支持将CAPTCHA验证集成到您的网站的原因还有很多。您可以使用以下代码进行操作。

HTML验证码

HTML或超文本标记语言描述了网页的结构。使用以下HTML代码来构造您的CAPTCHA验证表单:

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
<div id="captchaBackground">
<span id="captcha">captcha text</span>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

该代码主要由7个元素组成:

  • <h1 id =“ captchaHeading”> <h1> :此元素用于显示CAPTCHA表单的标题。
  • <span id =“ captcha”> </ span> :此元素用于显示验证码文本。
  • <input id =“ textBox” type =“ text” name =“ text”> -此元素用于创建输入框以键入验证码。
  • <input id =“ submitButton” type =“ submit”> :此按钮提交表单,并检查CAPTCHA和键入的文本是否相同。
  • <button id =“ refreshButton” type =“ submit”> </ button> :此按钮用于刷新验证码。
  • <span id =“ output”> </ span> :此元素用于根据输入的文本显示输出。
  • <div class =“ center”> </ div> :这是包含所有其他元素的父元素。

CSS和JavaScript文件通过<link rel =“ stylesheet” type =“ text / css” href =“ styles.css”><script src =“ script.js”> </ script>元素链接到此HTML页面。分别。您必须在正文末尾的head标签和script标签内添加link标签。

您还可以将此代码与网站的现有形式集成。

相关: HTML Essentials备忘单:标记,属性等

CSS验证码

CSS或级联样式表用于设置HTML元素的样式。使用以下CSS代码来设置上述HTML元素的样式:

 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 200px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
margin-bottom: 1em;
font-size: 30px;
letter-spacing: 3px;
color: #08e5ff;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

根据您的喜好在此代码中添加或删除CSS属性。您还可以使用CSS box-shadow属性为表单容器赋予优雅外观。

JavaScript验证码

JavaScript用于向原本静态的网页添加功能。使用以下代码将完整功能添加到CAPTCHA验证表单:

 // document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join('');

// This event listener is stimulated whenever the user press the "Enter" button
// "Correct!" or "Incorrect, please try again" message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of "Enter" Button is 13
if (e.keyCode === 13) {
if (userText.value === captchaText.innerHTML) {
output.classList.add("correctCaptcha");
output.innerHTML = "Correct!";
} else {
output.classList.add("incorrectCaptcha");
output.innerHTML = "Incorrect, please try again";
}
}
});
// This event listener is stimulated whenever the user clicks the "Submit" button
// "Correct!" or "Incorrect, please try again" message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === captchaText.innerHTML) {
output.classList.add("correctCaptcha");
output.innerHTML = "Correct!";
} else {
output.classList.add("incorrectCaptcha");
output.innerHTML = "Incorrect, please try again";
}
});
// This event listener is stimulated whenever the user press the "Refresh" button
// A new random CAPTCHA is generated and displayed after the user clicks the "Refresh" button
refreshButton.addEventListener('click', function() {
userText.value = "";
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join('');
output.innerHTML = "";
});

现在,您有了功能齐全的CAPTCHA验证表单!如果您想看完整的代码,可以克隆此CAPTCHA-Validator ProjectGitHub存储库。克隆存储库后,执行HTML文件,您将获得以下输出:

在输入框中输入正确的验证码后,将显示以下输出:

在输入框中输入任何不正确的验证码时,将显示以下输出:

使用验证码确保您的网站安全

过去,由于组织的网站上没有验证码表格,因此许多组织和企业遭受了严重损失,例如数据泄露,垃圾邮件攻击等。强烈建议将CAPTCHA添加到您的网站,因为它添加了安全层,以防止网站受到网络罪犯的攻击。

谷歌还推出了一项名为“ reCAPTCHA”的免费服务,该服务有助于保护网站免受垃圾邮件和滥用的侵害。 CAPTCHA和reCAPTCHA看起来很相似,但是它们并不是完全一样的。有时,CAPTCHA对于许多用户而言感到沮丧并且难以理解。虽然,有一个重要的原因使它们变得困难。