数字验证码

最新推荐文章于 2020-07-18 14:37:30 发布

原创最新推荐文章于 2020-07-18 14:37:30 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #ssh

本文介绍了一个简单的验证码生成及验证过程，包括HTML元素的使用、JavaScript中的验证码生成逻辑以及验证码的验证方法。通过自定义的CSS样式，实现了验证码的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先在html中引入之前封装好的css样式和js文件

验证码：<input id="input1" style="width: 80px;" />

<input id="checkCode" class="code" style="width: 55px" readonly="readonly" /> <a href="#" οnclick="createCode()" style="color: red">看不清，换一张</a>

function中写这些

var inputCode = document.getElementById("input1").value.toUpperCase();
var codeToUp=code.toUpperCase();
if(inputCode.length <=0) {
alert("请输入验证码！");
return false;
}
else if(inputCode != codeToUp ){
alert("验证码输入错误！");
createCode();
return false;

var code ; //在全局 定义验证码      
function createCode(){       
code = "";      
var codeLength = 4;//验证码的长度      
var checkCode = document.getElementById("checkCode");      
checkCode.value = "";      
var selectChar = new Array(1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f','g','h','j','k','l','m','n','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');      
      
for(var i=0;i

.code{      
background-image:url(w1.jpg);      
font-family:Arial;      
font-style:italic;      
color:#000;      
border:0;      
padding:2px 3px;      
letter-spacing:3px;      
font-weight:bolder;      
}



}  ;