关于jsp开发验证码的实现
前言,今天要写的是jsp开发时,需要的验证码功能。
1,实现验证码有很多方式,现在还有插件可以使用,今天主要讲的是通过代码实现验证码的功能
2,开始
1)首先我们要在前端写好验证码显示的区域
<div>
验证码:<img src="<%=request.getContextPath() %>/base2/validate" alt="验证码" id="image" />
<a href="javascript:reload();"><label>换一张</label></a><br>
<input type="text" name="yanzhengma" id="yanzhengma" class="form-control" placeholder="验证码(忽略大小写)" onblur="validateCode();" />
<label id="spans"></label>
</div>
2)然后我们需要写好JavaScript,我们需要用到它去获得验证码,以及刷新验证码功能
<script type="text/javascript">
//-----------------------这个函数主要用来刷新验证码------------------------------------
function reload(){
$("#image").attr('src','<%=request.getContextPath()%>/base2/validate?date='+new Date().getTime());
$("#checkcode").val(""); // 将验证码清空
}
//------------------------这个函数用来校验验证码--------------------------
function yanzhengma() {
var spans=document.getElementById("spans");
var texts=document.getElementById("yanzhengma").value;
if(texts.length<=0){
spans.innerHTML="请输入输入验证码";
spans.style.background="red";
return false;
}else{
$.ajax({
Type:"POST",
url:"base2/check",
data:{"texts":texts},
success:function (data) {
var booleans=data.boo;
if (booleans == "false") {
spans.innerHTML = "验证码输入错误";
spans.style.background = "red";
reload(); //验证失败后需要更换验证码
texts = ""; // 将验证码清空
return false;
} else {
spans.innerHTML = "验证码输入正确";
spans.style.background = "green";
return true;
}
}
});
}
}
</script>
3)第三步当然就是制作验证码了,我使用的方式是用SpringMvc去访问的后台。当然你也直接可以用servlet
@Controller
@RequestMapping("/base2")
public class codechange {
@RequestMapping("/validate")
private void validate(HttpServletRequest request, HttpServletResponse response) throws Exception{
System.out.println("*********************验证码查询进来了*********************************");
BufferedImage bfi = new BufferedImage(75, 35, BufferedImage.TYPE_INT_RGB);
Graphics g = bfi.getGraphics();
g.fillRect(0, 0, 75, 35);
//验证码字符范围
char[] ch = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".toCharArray();
Random r = new Random();
int index;
StringBuffer sb = new StringBuffer(); //保存字符串
for (int i = 0; i < 4; i++) {
index = r.nextInt(ch.length);
g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));
Font font = new Font("宋体", 30, 30);
g.setFont(font);
g.drawString(ch[index] + "", (i * 20) + 2, 23);
sb.append(ch[index]);
}
// 添加噪点
/* int area = (int) (0.02 * 80 * 25);
for (int i = 0; i < area; ++i) {
int x = (int) (Math.random() * 80);
int y = (int) (Math.random() * 25);
bfi.setRGB(x, y, (int) (Math.random() * 255));
}*/
//设置验证码中的干扰线
for (int i = 0; i < 6; i++) {
//随机获取干扰线的起点和终点
int xstart = (int) (Math.random() * 80);
int ystart = (int) (Math.random() * 25);
int xend = (int) (Math.random() * 80);
int yend = (int) (Math.random() * 25);
g.drawLine(xstart, ystart, xend, yend);
}
HttpSession session = request.getSession(); //保存到session
session.setAttribute("verificationCode", sb.toString());
ImageIO.write(bfi, "JPG", response.getOutputStream()); //写到输出流
System.out.println("验证码制作完毕:"+sb.toString());
}
@RequestMapping("/check")
@ResponseBody
private Map check(HttpServletRequest request, HttpServletResponse response) throws Exception{
System.out.println("*******************验证码校验开始***************");
HttpSession session =request.getSession();
String verificationCode = (String)session.getAttribute("verificationCode");
System.out.println("**sesion中的验证码为****************"+verificationCode);
String checkcode = request.getParameter("texts");
System.out.println("**前端传来中的验证码为****************"+checkcode);
Map map=new HashMap();
if(checkcode.equalsIgnoreCase(verificationCode)){
System.out.println("*******************验证码校验结束,相等****************");
map.put("boo",new String("true"));
System.out.println("map的值"+map.get("boo"));
}else{
System.out.println("*******************验证码校验结束,不相等****************");
map.put("boo",new String("false"));
}
return map;
}
}
好了,验证码的制作就完成了。看一下效果图,把它直接加在登录页面就行了
还没有评论,来说两句吧...