js验证码

Posted 蝈蝈大王

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js验证码相关的知识,希望对你有一定的参考价值。

1、html

<html>      
<head>      
<script language = "javascript" src = "code.js"></script>      
<link rel="stylesheet" type="text/css" href="code.css">      
</head>      
<body onload="createCode();">      
<form>      
<center>验证码:<input type="text" id="input1" />      
<input type="text" id="checkCode" class="code" style="width: 55px" /> <a href="#" onclick="createCode()">看不清楚</a>      
<input id="Button1" onclick="validate();" type="button" value="确定" /></center>      
</form>      
</body>      
</html>  

2、code的css样式

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

3、code的js

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<codeLength;i++) {      
   var charIndex = Math.floor(Math.random()*60);      
  code +=selectChar[charIndex];      
}      
if(code.length != codeLength){      
  createCode();      
}      
checkCode.value = code;      
}      
      
     
function validate () {      
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;      
}      
else {      
  alert("输入正确,输入的验证码为:"+inputCode);      
  return true;      
}      
      
}         

简单的验证码就实现了

以上是关于js验证码的主要内容,如果未能解决你的问题,请参考以下文章

JSP 设计教师与学生不同登陆界面(带验证码)

js实现输入手机验证码后点击提交按钮验证手机输入的验证码和发送的验证码是不是一致

一百一十八:CMS系统之短信验证码加密和js代码混淆

jquery实现手机发送验证码的倒计时代码

git动态验证码

js短信验证码时间