JavaScript 实现前端验证码生成与验证

作者：代码拾荒时间：2026-10-30 14:31:47浏览：231

本文介绍如何使用 JavaScript 在前端生成随机验证码并实现用户输入的校验功能。通过定义字符集与随机索引，动态生成指定长度的验证码字符串。页面包含展示区、输入框及验证按钮，点击生成时调用随机算法，验证时比对用户输入与生成值，不一致则提示错误并刷新，一致则提示成功。

JavaScript 实现前端验证码生成与验证

以下直接展示相关代码实现，具体代码如下所示：


<html> 
<head> 
<title>验证码</title> 
<style type="text/css"> 
#code 
{ 
font-family:Arial; 
font-style:italic; 
font-weight:bold; 
border:0; 
letter-spacing:2px; 
color:blue; 
} 
</style> 
<script type = "text/javascript" src = "checkCode.js"> 
</script> 
</head> 
<body> 
<div> 
<input type = "text" id = "input"/> 
<input type = "button" id="code" onclick="createCode()"/> 
<input type = "button" value = "验证" onclick = "validate()"/> 
</div> 
</body> 
</html>

checkCode.js


var code ; //在全局定义验证码 
//产生验证码 
window.onload = function createCode(){ 
code = ""; 
var codeLength = 4;//验证码的长度 
var checkCode = document.getElementById("code"); 
var random = new Array(0,1,2,3,4,5,6,7,8,9,'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');//随机数 
for(var i = 0; i < codeLength; i++) {//循环操作 
var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35） 
code += random[index];//根据索引取得随机数加到code上 
} 
checkCode.value = code;//把code值赋给验证码 
} 
//校验验证码 
function validate(){ 
var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写 
if(inputCode.length <= 0) { //若输入的验证码长度为0 
alert("请输入验证码！"); //则弹出请输入验证码 
} 
else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时 
alert("验证码输入错误！@_@"); //则弹出验证码输入错误 
createCode();//刷新验证码 
document.getElementById("input").value = "";//清空文本框 
} 
else { //输入正确时 
alert("^-^"); //弹出^-^ 
} 
}

上述内容介绍了利用 JavaScript 生成验证码并完成验证的具体方法，希望能对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复。在此非常感谢大家对本站的支持！

作者最新文章

JavaScript入门书籍避坑：这些书不适合初学者

2026-11-05 16:31:15

JS使用Math.round实现保留两位小数的原理与代码

2026-11-05 15:35:55

JavaScript 原生 Date 对象怎么实现日期加减

2026-11-05 14:30:00

JavaScript函数定义的三种方式：声明、表达式与箭头函数

2026-11-05 13:50:55

JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异

2026-11-05 12:47:23