JS 验证码生成及校验（详细注释）

article/2025/11/6 1:07:33

这是个非常简单的(粗糙)模拟验证码生成及校验的小案例，只简单的实现下功能，后续希望可以做验证码背景是有颗粒的，同时有干扰线...更符合实际场景的验证码生成及校验。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>验证码生成及校验</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="v_code"><div class="code_show"><span class="code" id="checkCode"></span><a id="linkbt">看不清换一张</a></div><div class="input_code"><label class="lable"for="inputCode">验证码：</label><input type="text" id="inputCode" /><!-- <span id="text_show"></span> --></div><input id="Button1" type="button" value="确定" /></div><script>window.onload = function(){// 1.生成验证码// 4位数 a-o随机生成4位数，内容必须是a-o字符串var res = getCode();function getCode(){var arr = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o'];var str = '';for(var i = 0; i < 4; i++){num = Math.round(Math.random() * (15-0)+0);str += arr[num];}return str;}document.getElementById('checkCode').innerText = getCode();// 2. 点击看不清 生成新的验证码document.getElementById('linkbt').onclick = function(){document.getElementById('checkCode').innerText = getCode();}// 3. 提交时进行对比document.getElementById('Button1').onclick = function(){var code = document.getElementById('checkCode').innerText;var inputCode = document.getElementById('inputCode').value;if(code !== inputCode){alert('您输入的验证码不正确');// 不正确的时候清空文本框document.getElementById('inputCode').value = '';return false;}             }}</script>
</body>
</html>

更多css小动画，js案例点击我的主页

我的主页