您的位置：首页 > Web前端 > JavaScript

4位随机简单验证码的JS实现

2018-01-29 21:39 836 查看

验证码是用来区分人和计算机的，通常通过模糊字符、拼图等形式达到让人能看懂且计算机无法识别的效果。我们采用验证码是为了防止机器不断登录的现象，比如现实生活中的刷票、刷帖、灌水等。在本篇用JS实现4位简单网页验证码，当然这是最基础的验证码，安全性比较低。

以下是HTML的代码：

<body onload="createCode()">
<form>
<ce
4000
nter>验证码：
<input type="text" id="input1" />
<input type="text" id="checkNode" class="code" style="width: 55px" disabled="disabled" />
<a href="#" onclick="createCode()">看不清楚，换一张</a><br/>
<input type="button" name="button1" onclick="validate()" value="确定" />
</center>
</form>
</body>
给呈现验证码的文本框添加 disabled="disabled",将验证码设置为可读不可写。

以下是CSS的代码，是对验证码加的样式：<style type="text/css">
.code{
background-image: url(securityCodeBackground2.png);/* 验证码的背景图 */
font-family: Arial;
font-style: italic;
color: black;
border: 0;
padding:2px 3px;
letter-spacing: 3px;
font-weight: bolder;
text-align: center;
}
</style>
设置验证码在文本框中居中。

以下是JS代码：
<script type="text/javascript">
/*在页面加载完成时生成一个随机的验证码*/
window.onload=function(){
createCode();
}
var code;/*定义一个验证码的全局变量*/
function createCode(){/* 生成验证码的函数 */
code="";
var codeLength=4;
var checkCode=document.getElementById("checkNode");
checkCode.value="";
var selectChar=new Array(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','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 i=0;i<codeLength;i++){
var charIndex=Math.floor(Math.random()*61);
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;
}
}
</script>红笔标出来的地方是我出错的地方，第一处是把id传错了，结果是不会生成验证码；第二处是在CSS中把input1写成了name的属性值，没有写id，结果是不会对用户的输入产生反应。初写JS代码，被这些笔误害惨了，花了很多时间才找到错误。以后还是应该先在火狐浏览器中调试，firebug真心对调试JS代码非常好用，花几个小时也找不到的bug一下就找出来了。

这是JS的第一篇文章，从此要打开编写JS的大门啦，，，

文章中部分内容有来自网络的借鉴

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航