超简单ValidateCode图形验证码实现

图形验证码在行业被广泛应用,几乎随处可见。图形验证码的实现代码也五花八门。如果你去深究,发现其实都是换汤不换药,我们都一样!

使用图形验证码,主要也就是分为两类(大体分类),一类是自己写验证码生成的工具类(当然也是去百度copy一通,大神除外),一类是使用第三方的验证码生成工具包。我个人就喜欢第二种,站在巨人的肩膀上。

今天我们使用第三方的工具包ValidateCode来完成图形验证码的实现。主要代码就几行,用起来就是两个字,爽!

废话不多说,直接上代码!
第一步:准备页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
   <form action="checkLogin" method="post">
      <p>用户名:<input name="username"></p>
      <p>密码:<input type="password" name="password"></p>
      <p>验证码:<input name="yzm"><img id="yzm" src="yzm"></p>
      <p><input type="submit" value="登录"></p>
   </form>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
  //给验证码图片绑定单击事件,点击图片切换验证码
  $("#yzm").click(function(){
	  //?count=随机数,是为了防止缓存原因不刷新验证码
	  $("#yzm").attr("src","yzm?count="+Math.random());
  })
</script>

第二步:编写生成验证码的Servlet或者

@WebServlet("/yzm")
public class YzmServlet extends HttpServlet{

	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		/*
		 * 生成验证码:ValidateCode(param1,param2,param3,param4)
		 * param1:表示验证码的宽度
		 * param2:表示验证码的高度
		 * param3:表示验证码的个数
		 * param4:表示验证码中的干扰线的数量
		 */
		ValidateCode vc = new ValidateCode(150,40,5,150);
		//得到生成的验证码
		String code = vc.getCode();
		//把验证码存放到session中,当然拿到验证码之后具体怎么做,就不归我管了
		HttpSession session = request.getSession();
		session.setAttribute("code", code);
		//通过响应的输出流把验证码图片写到页面
		vc.write(response.getOutputStream());
	}
}

注意:验证码图片标签中的src属性的地址,就是访问servlet的地址。

备注:如果还有不明白的地方留言吧!如果需要ValidateCode.jar的留下联系方式!闪~~~~

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页