验证码
一、JS验证码
1.Js验证码概念：
是通过编写JavaScript代码获得的随机验证码,在客户端运行。
2.实现思路
数组当中存放所有候选组成验证码的字符，通过随机产生的下标来循环获得数组当中的字符，循环次数由自己制定，每循环一次就拼接一次，从而组成一个字符串的验证码。
3.案例：
< script>
Var code;
| function createCode() | |
| { | |
| code = ""; | |
| var codeLength = 4;//验证码的长度 | |
| var checkCode = document.getElementById("checkCode"); | |
| var selectChar = new Array(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');//所有候选组成验证码的字符，当然也可以用中文的 | |
| for(var i=0;i<codeLength;i++) | |
| { | |
| var charIndex = Math.floor(Math.random()*10); | |
| code +=selectChar[charIndex]; | |
| } | |
| if(checkCode) | |
| { | |
| checkCode.className="code"; | |
| checkCode.innerHTML=code; | |
| } | |
| } | |
| window.onload =createCode; |
</script>
4.Js验证码的好处与坏处
好处：减少服务器的压力，企业中经常用Js验证码
坏处：容易看到源码，很容易被破解
二、JSP验证码
1.jsp验证码概念
是通过编写jsp代码获得的随机验证码，在服务端运行。
2.实现思路
简单的说就是调用validatecode.jsp页面
该页面包含“随机产生一个字符串”的方法，设置验证码的背景色和前景色的方法，随机产生获得的字符串保存在session中，然后创建一个内存的图片对象用来绘制图片，最后将图片从内存中读出来到硬盘中，即产生的验证码是一张带有图片的验证码。
3. jsp验证码的好处与坏处
好处：不能看到源码，很难被破解
坏处：如果有很多人访问就会增加服务器的压力，因为jsp验证码的代码是在服务端运行的。
4.注意事项
做验证码刷新效果：换一张
<Script>
function checkCode(){
var codekey=document.getElementById("codekey");
codekey.src = 'validatecode.jsp?time='+new Date().getTime();
//?time='+new Date().getTime()是拼接一个时间毫秒数，不拼则使用缓冲中的验证码图片，造成不切换的效果
}
</Script>
三、java验证码
纯java代码编写的验证码
调用一个封装好的类就能使用
四、Servlet验证码
导包ValidateCode.jar
1、将ValidateCode.jar放到WebRoot/lib目录下。
2、Servlet编写：
public class ServletDemo4 extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//生成一个宽为110，高为25，4个数字，5条干扰线的验证码
ValidateCode validateCode = new ValidateCode(110, 25, 4, 5);
validateCode.write(response.getOutputStream());
}
}
3、Html编写：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeCode(){
var img = document.getElementsByTagName("img")[0];
img.src = "demo4?time="+new Date().getTime();
}
</script>
</head>
<body>
<form actioin="#">
username：<input type="text" name="username"/><br/>
password：<input type="text" name="password"/><br/>
code：<input type="text" name="code"/>
<img src="demo4" οnclick="changeCode()"><a href="javascript:changeCode()">看不清，换一张</a>
<br/>
</form>
</body>
</html>
如果大家想浏览我的下一篇文章，请留言
版权声明：此文章属于原创，不准随意转载：https://blog.csdn.net/LYQ2332826438
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
