使用html，js制作一个简单的验证码验证页面

好的，以下是一个简单的验证码验证页面的示例代码： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证码验证</title> </head> <body> <h1>验证码验证</h1> <p>请输入下面图片中显示的验证码：</p> <img id="captchaImg" src="captcha.php" alt="验证码"> <br> <input type="text" id="captchaInput"> <button id="verifyBtn">验证</button> <p id="result"></p> <script src="verify.js"></script> </body> </html> ``` 在上面的代码中，我们使用了一个 `img` 标签来展示验证码图片，并且在 `input` 标签中输入验证码。我们还添加了一个 “验证” 按钮，并在页面底部显示验证结果。 JavaScript代码： ```js const captchaInput = document.querySelector('#captchaInput'); const verifyBtn = document.querySelector('#verifyBtn'); const result = document.querySelector('#result'); verifyBtn.addEventListener('click', () => { const captchaText = captchaInput.value; fetch(`verify.php?captcha=${captchaText}`) .then(response => response.json()) .then(data => { if (data.valid) { result.textContent = '验证成功！'; } else { result.textContent = '验证码错误，请重新输入！'; } }) .catch(error => console.error(error)); }); ``` 在上面的代码中，我们首先使用 `querySelector` 方法获取了验证码输入框、验证按钮和结果显示区域的元素。然后，我们添加了一个 “验证” 按钮的 `click` 事件监听器。当用户点击该按钮时，我们会获取用户输入的验证码文本，并使用 `fetch` 方法将验证码文本提交给服务器进行验证。在服务器端，我们可以使用 PHP 或其它语言来生成和验证验证码。以下是一个简单的 PHP 代码示例： ```php <?php session_start(); function generateCaptcha($length = 6) { $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'; $captcha = ''; for ($i = 0; $i < $length; $i++) { $captcha .= $characters[rand(0, strlen($characters) - 1)]; } $_SESSION['captcha'] = $captcha; return $captcha; } function verifyCaptcha($captcha) { if (isset($_SESSION['captcha']) && strtolower($captcha) == strtolower($_SESSION['captcha'])) { return true; } else { return false; } } if (isset($_GET['captcha'])) { $valid = verifyCaptcha($_GET['captcha']); echo json_encode(array('valid' => $valid)); } else { generateCaptcha(); header('Content-type: image/png'); $image = imagecreate(100, 30); $text_color = imagecolorallocate($image, 0, 0, 0); imagestring($image, 5, 5, 5, $_SESSION['captcha'], $text_color); imagepng($image); imagedestroy($image); } ``` 在上面的 PHP 代码中，我们使用了 `session_start` 函数来启用会话，并使用 `generateCaptcha` 函数来生成验证码并将其保存在会话中。我们还使用 `verifyCaptcha` 函数来验证用户输入的验证码是否与保存在会话中的验证码相同。当用户提交验证码文本时，我们会调用 `verifyCaptcha` 函数进行验证，并将验证结果以 JSON 格式返回给客户端。如果用户访问 `captcha.php` 页面时没有传递 `captcha` 参数，我们会生成一个新的验证码并将其显示在一个 PNG 图片中。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

使用html，js制作一个简单的验证码验证页面

最新推荐

JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

JavaScript生成验证码并实现验证功能

JS构造一个html文本内容成文件流形式发送到后台

用html5的canvas和JavaScript创建一个绘图程序的简单实例

通过JS动态创建一个html DOM元素并显示

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

HSV转为RGB的计算公式

JSBSim Reference Manual