一个简易版的JS验证码，仅供参考

来源：互联网发布：淘宝网红排行榜2017 编辑：程序博客网时间：2024/05/21 18:43

首先是HTML代码body中的内容如下：

<body onload="createCode()">  <input type="text" name="ycode" id="ycode"><a href="javascript:createCode()"><div id="code"></div></a><input type="button" value="确定" onclick="validate()"> </body>

下面是css样式代码，仅仅演示，代码比较简单：

#code{width:50px;height:20px;border:1px solid black;float:left;margin-left:5px;background-color:black;color:white;text-align:center;}#ycode{float:left;}

最后是js代码

//初始化数组，验证码的资源var selectChar = new Array(1,2,3,4,5,6,7,8,9,0,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');//全局变量，用于存储生成的验证码var code = "";//生成验证码function createCode(){//这里为了避免出现验证码累加问题，每次创建都先清除原有记录code="";//这里验证码个数可以自由决定，默认4for(var i = 0; i < 4; i++){//通过随机数的方式获取数组的随机下标var index = Math.floor(Math.random()*(selectChar.length));//code拼接code+=selectChar[index];}//将拼接完成后的验证码填入指定div中（显示）document.getElementById("code").innerHTML=code;}//验证function validate(){var ycode = document.getElementById("ycode").value;//先判断是否输入验证码if(ycode.length<1){alert("请输入验证码");}else{//避免大小写不一致的问题，将自动生成的code以及用户输入的code都转换为小写code = code.toLowerCase();ycode = ycode.toLowerCase();//验证实际code和用户输入code是否一致if(code == ycode){alert("验证通过");}else{alert("验证码错误,请重新输入");//在提示错误的同时将验证码重新生成createCode();}}}

over！

最后页面显示效果如下：

注：通过js生成一个简易的验证码，主要是避免过多的访问服务器，使得程序的整体性能下降；但是存在一些问题，若用户端浏览器禁用脚本则此程序则无法正常使用了！