本文详细介绍了如何使用HTML、CSS和JavaScript在网页上实现一个简单的验证码验证功能，包括随机生成验证码和用户输入验证的过程。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证码验证</title> </head> <body> <div id="verificationCode" style="text-align: center;"></div> <input style="width: 50%;margin-left: 25%;" type="text" id="userInput" placeholder="请输入验证码"> <button onclick="verifyCode()">提交</button> <p id="result"></p> <script> // 生成随机验证码 generateCode() function generateCode() { // 定义包含数字和字母的字符集合 let chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"; // 初始化验证码为空字符串 let code = ""; // 循环生成长度为6的验证码 for (let i = 0; i < 4; i++) { // 随机生成一个字符的索引 let randomIndex = Math.floor(Math.random() * chars.length); // 将随机字符添加到验证码中 code += chars[randomIndex] } //获取显示验证码的div let ipts = document.getElementById("verificationCode"); //将新生成的验证码显示到页面上 ipts.innerHTML = code; } function verifyCode() { // 获取生成的验证码 let newCode = document.getElementById('verificationCode').textContent; //获取用户输入的验证码 let userInput = document.getElementById('userInput'); if (userInput.value===newCode) { alert("验证成功！") } else{ alert("验证失败！") } userInput.value=null; generateCode() } </script> </body> </html>
