在 HTML 和 Javascript 中创建验证码

Create Captcha Code in HTML and Javascript

嗨朋友们，在本教程中，您将学习如何创建 HTML 和 Javascript 中的验证码 .有多种方法可以生成验证码，例如 Google ReCaptcha 和其他验证码等。

还读了， ** Google Maps 使用 Maps Javascript API 和 HTML 添加标记**

HTML 和 Javascript 中验证码的逻辑

首先，我们将调用一个带有 javascript onclick 事件处理程序的函数到输入验证码字段，以生成 4 位随机验证码。验证码将在页面打开时自动加载。每次点击刷新按钮后都会生成一个验证码。
现在，我们将使用 HTML 表单的 javascript onsubmit 事件处理程序来验证验证码。假设如果用户在没有输入验证码的情况下点击提交按钮，那么提交事件处理程序中的函数将返回 false，即它阻止 HTML 表单提交，并且将向用户显示错误消息。
如果您输入了错误的验证码，您将收到一条错误消息，否则您将收到正确验证码的成功警报。

此外，您必须禁用验证码字段中的复制文本，以便无法复制验证码。为此，请在脚本标记内添加以下代码行。

 //禁止右键点击网页  
 $("html").on("contextmenu",function(e){  
 返回假；  
 });  
 // 禁用网页上的剪切、复制和粘贴  
 $('html').bind('剪切复制粘贴', function (e) {  
 e.preventDefault();  
 });

笔记 :- 不要忘记包括 jQuery CDN 链接在 head 标签内，否则您无法禁用复制文本功能。

HTML :-

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <title>图形验证码</title>  
 <meta charset="utf-8">  
 <meta name="viewport" content="width=device-width, initial-scale=1">  
 <link href="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/dist/css/bootstrap.min.css" rel="stylesheet">  
 <script src="https://cdn.jsdelivr.net/npm/[[email protected]](/cdn-cgi/l/email-protection)/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>HTML 和 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">电子邮件：</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">密码：</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">验证码：</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">输入验证码：</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">提交</button>  
 </form>  
 </div>  
 <script type="text/javascript">  
 //用于验证码  
 函数生成验证码（事件）  
 {  
 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');  
 在;  
 对于 (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 代码 = a + '' + b + '' + '' + c + '' + d;  
 document.getElementById("mainCaptcha").value = 代码  
 var el = document.getElementById('mainCaptcha');  
 el.style.fontFamily = '日内瓦，Verdana，无衬线';  
 el.style.fontSize = '大';  
 } //验证表单  
 函数验证表单（）{  
 让 x = document.forms["myForm"]["checkcaptcha"].value;  
 让 y = document.forms["myForm"]["maincaptcha"].value;  
            
 如果（x ==“”）{  
 document.getElementById('error').innerHTML = "请输入验证码。";  
                 
 返回假；  
 }  
 如果（x！==y）{  
 document.getElementById('error').innerHTML = "验证码不匹配。";  
                 
 返回假；  
 }  
 如果（x===y）{  
 document.getElementById('error').innerHTML = "";  
 alert("验证码输入成功");  
 返回真；  
 }  
 }  
 // 页面加载后自动生成验证码  
 $(window).on('load', function () {  
 生成验证码（事件）；  
 });  
 //禁止右键点击网页  
 $("html").on("contextmenu",function(e){  
 返回假；  
 });  
 // 禁用网页上的剪切、复制和粘贴  
 $('html').bind('剪切复制粘贴', function (e) {  
 e.preventDefault();  
 });  
 </script>  
 </body>  
 </html>