JavaScript验证码生成和验证效果

快乐打工仔 分类:实例代码

JavaScript验证码生成和验证效果属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它实现了动态生成验证码,并且能够实现验证码输入的验证。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.v_code {
width: 600px;
margin: 0 auto;
}
.v_code > input {
width: 60px;
height: 36px;
margin-top: 10px;
}
.code_show {
overflow: hidden;
}
.code_show span {
display: block;
float: left;
margin-bottom: 10px;
}
.code_show a {
display: block;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.code {
font-style: italic;
background-color: #f5f5f5;
color: blue;
font-size: 30px;
letter-spacing: 3px;
font-weight: bolder;
float: left;
cursor: pointer;
padding: 0 5px;
text-align: center;
}
#inputCode {
width: 100px;
height: 30px;
}
a {
text-decoration: none;
font-size: 12px;
color: #288bc4;
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
</style>
<script>
var code;
function createCode() {
code = "";
var codeLength = 6; //验证码的长度
var checkCode = document.getElementById("checkCode");
var codeChars = 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',
'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 index = 0; index < codeLength; index++) {
var charNum = Math.floor(Math.random() * 52);
code += codeChars[charNum];
}
if (checkCode) {
checkCode.className = "code";
checkCode.innerHTML = code;
}
}
function validateCode() {
var inputCode = document.getElementById("inputCode").value;
var textShow = document.getElementById("text_show")
if (inputCode.length <= 0) {
textShow.innerHTML = "请输入验证码";
textShow.style.color = "red";
} else if (inputCode.toUpperCase() != code.toUpperCase()) {
textShow.innerHTML = "您输入的验证码有误";
textShow.style.color = "red";
createCode();
} else {
textShow.innerHTML = "验证码正确";
textShow.style.color = "green";
}
}
function checkCode(){
var btn = document.getElementById("Button1");
btn.onclick=function(){
validateCode();
}
}
window.onload = function () {
checkCode();
createCode();
document.getElementById("checkCode").onclick = function () { createCode() }
linkbt.onclick = function () { createCode() }
inputCode.onclick = function () { validateCode(); }
}
</script>
</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 for="inputCode">验证码:</label>
<input type="text" id="inputCode"/>
<span id="text_show"></span>
</div>
<input id="Button1" type="button" value="确定" />
</div>
</body>
</html>

上面的代码实现了我们的妖气,下面介绍一下它的实现过程。

一.代码注释:

(1).var code,声明一个变量,用来存储验证码。

(2).function createCode() {},此函数可以创建一个验证码。

(3).code = "",先将验证码设置为空。

(4).var codeLength = 6,验证码的长度为6。

(5).var checkCode = document.getElementById("checkCode"),获取id属性值为checkCode的元素对象。

(6). var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9),此数组用来存储验证码所使用的字符。

(7).for (var index = 0; index < codeLength; index++) {

  var charNum = Math.floor(Math.random() * 52);

  code += codeChars[charNum];

},通过for循环犯事创建一个长度为6的验证码字符串。

(8).if (checkCode) {

  checkCode.className = "code";

  checkCode.innerHTML = code;

}如果存在checkCode元素对象。

那么就设置它的class属性值和html字符串内容。

(9).function validateCode() {},此函数实现了验证功能。

(10).var inputCode = document.getElementById("inputCode").value,获取输入验证码的值。

(11).var textShow = document.getElementById("text_show"),获取要显示警告与的元素对象。

(12).if (inputCode.length <= 0) {

  textShow.innerHTML = "请输入验证码";

  textShow.style.color = "red";

} else if (inputCode.toUpperCase() != code.toUpperCase()) {

  textShow.innerHTML = "您输入的验证码有误";

  textShow.style.color = "red";

  createCode();

} else {

  textShow.innerHTML = "验证码正确";

  textShow.style.color = "green";

}上面是对验证码验证的简单逻辑。

(13).function checkCode(){

  var btn = document.getElementById("Button1");

  btn.onclick=function(){

    validateCode();

  }

},此函数可以实现事件处理函数的注册功能。

二.相关阅读:

(1).Math.floor()参阅javascript Math.floor()一章节。

(2).Math.random() 参阅js Math.random()一章节。

(3).className参阅js className一章节。

(4).innerHTML参阅innerHTML一章节。

(5).toUpperCase()参阅javascript toUpperCase()一章节。

JavaScript验证码生成和验证效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript验证码生成和验证效果就介绍到这了。

回复

我来回复
  • 暂无回复内容