本文实例为大家分享了springmvc实现验证码功能展示的具体代码,供大家参考,具体内容如下
先看效果图:
思路:
首先验证码是一张图片,是一张有着随机字母、数字、图案等组成的图片,所以这图片肯定不是固定不变的,肯定是由后端随机制造出来的,前端用img的src去不断访问这个制造的方法。
第一步:前端页面编写
登录使用的是ajax方法,所以使用的是调用点击事件进行,验证码的图片放在a标签中是为了方便点击变换验证码。显示图片用的是img的src属性,因为使用的是spingmvc所以调用后台方法使用action的方式。
<form> <div id="login_tip"> 管理员登录 </div> <div><input type="text" id="user_code" name="user_code" class="username" placeholder="请输入账号"></div> <div><input type="password" id="user_account" name="user_account" class="pwd" placeholder="请输入密码"></div> <div id="btn_area"> <input type="text" id="VerificationCode" name="VerificationCode" placeholder="请输入验证码" class="verify"> <a href="javascript:void(0);" rel="external nofollow" onclick="VerificationCode()"> <img id="randCodeImage" alt="验证码" src="VerificationCode/generate.action" width="100" height="40"/> </a> </div> <div style="float:left;"> <input type="button" name="button" id="sub_btn" onclick="login()" value="登录"/> </div> <div id="verification_Code"><b></b></div> </form>
第二步:编写JS代码
因为登录采用的是ajxa,所以后台登录会验证一些数据,不正确的会返回数据到登录页面。这里说明一下,在调用生成验证码的方法后面为什么要加一个随机数,这里的随机数以及这个随机数的参数名称可以随意写,后端不做任何操作的,这里是防止浏览器对一个相同方法进行调用时取缓存的方法,而点击图片或验证码输入错误不会自动刷新而改变图片的问题做处理。
<script type="text/javascript"> function login(){ //这是使用ajax的方式提交 $.ajax({ type:'post', url:'Uase/query.action', //data:$('#loginInputForm').serialize(), data:{ 'user_code' : $("#user_code").val(), 'user_account' :$("#user_account").val(), 'VerificationCode':$("#VerificationCode").val(), }, dataType:'json', success:function(obj){ var rad = Math.floor(Math.random() * Math.pow(10, 8)); if(obj && obj.success=='true'){ window.location.href='Uase/login.action'; }else{ document.getElementById("verification_Code"). innerHTML =obj.msg; //uuuy是随便写的一个参数名称,后端不会做处理,作用是避免浏览器读取缓存的链接 $("#randCodeImage").attr("src", "VerificationCode/generate.action?uuuy="+rad); $("#VerificationCode").val("").focus(); // 清空并获得焦点 } } }); } /** *验证码刷新 */ function VerificationCode(){ var rad = Math.floor(Math.random() * Math.pow(10, 8)); //uuuy是随便写的一个参数名称,后端不会做处理,作用是避免浏览器读取缓存的链接 $("#randCodeImage").attr("src", "VerificationCode/generate.action?uuuy="+rad); } </script>
第三步:编写后台Controller控制类
主方法为VerificationCode,里面会用到一些随机数生产的方法以及一些辅助类,全用用上就可以了,因为我这里用到了可以更改类型的验证码,所以用到了一个自己编写的公共的工具类。
@RequestMapping("/VerificationCode") public class VerificationCodeController extends HttpServlet{ private static final long serialVersionUID = 1L; /** * 这里用作存入session的名称 */ private static final String SESSION_KEY_OF_RAND_CODE = "randCode"; // todo 要统一常量 /** * */ private static final int count = 200; /** * 定义图形大小(宽) */ private static final int width = 105; /** * 定义图形大小(高) */ private static final int height = 35; /** * 干扰线的长度=1.414*lineWidth */ private static final int lineWidth = 1; @RequestMapping(value = "/generate", method = { RequestMethod.POST, RequestMethod.GET }) public void VerificationCode( HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 设置页面不缓存 response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); // response.setContentType("image/png"); // 在内存中创建图象 final BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); // 获取图形上下文 final Graphics2D graphics = (Graphics2D) image.getGraphics(); // 设定背景颜色 graphics.setColor(Color.WHITE); // ---1.Color.WHITE为白色 graphics.fillRect(0, 0, width, height);//填充衍射 // 设定边框颜色 //graphics.setColor(getRandColor(100, 200)); // ---2.这是以数字型来设置颜色,颜色模式是指使用三种基色:红、绿、蓝,通过三种颜色的调整得出其它各种颜色,这三种基色的值范围为0~255 graphics.drawRect(0, 0, width - 1, height - 1); final Random random = new Random(); // 随机产生干扰线,使图象中的认证码不易被其它程序探测到 for (int i = 0; i < count; i++) { graphics.setColor(getRandColor(150, 200)); // ---3. final int x = random.nextInt(width - lineWidth - 1) + 1; // 保证画在边框之内 final int y = random.nextInt(height - lineWidth - 1) + 1; final int xl = random.nextInt(lineWidth); final int yl = random.nextInt(lineWidth); graphics.drawLine(x, y, x + xl, y + yl); } // 取随机产生的认证码(4位数字) final String resultCode = exctractRandCode(); for (int i = 0; i < resultCode.length(); i++) { // 将认证码显示到图象中,调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成 // graphics.setColor(new Color(20 + random.nextInt(130), 20 + random // .nextInt(130), 20 + random.nextInt(130))); // 设置字体颜色 graphics.setColor(Color.BLACK); // 设置字体样式 //graphics.setFont(new Font("Arial Black", Font.ITALIC, 18)); graphics.setFont(new Font("Times New Roman", Font.BOLD, 24)); // 设置字符,字符间距,上边距 System.out.print(resultCode.charAt(i)); graphics.drawString(String.valueOf(resultCode.charAt(i)), (23 * i) + 8, 26); } System.out.println("直接输出:"+resultCode); // 将认证码存入SESSION request.getSession().setAttribute(SESSION_KEY_OF_RAND_CODE, resultCode); // 图象生效 graphics.dispose(); // 输出图象到页面 ImageIO.write(image, "JPEG", response.getOutputStream()); } /** * @return 随机码 */ private String exctractRandCode() { final String randCodeType = ResourceUtil.getRandCodeType(); int randCodeLength = Integer.parseInt(ResourceUtil.getRandCodeLength()); if (randCodeType == null) { return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength); } else { switch (randCodeType.charAt(0)) { case '1': return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength); case '2': return RandCodeImageEnum.LOWER_CHAR.generateStr(randCodeLength); case '3': return RandCodeImageEnum.UPPER_CHAR.generateStr(randCodeLength); case '4': return RandCodeImageEnum.LETTER_CHAR.generateStr(randCodeLength); case '5': return RandCodeImageEnum.ALL_CHAR.generateStr(randCodeLength); default: return RandCodeImageEnum.NUMBER_CHAR.generateStr(randCodeLength); } } } /** * 描述:根据给定的数字生成不同的颜色 * @param 这是以数字型来设置颜色,颜色模式是指使用三种基色:红、绿、蓝,通过三种颜色的调整得出其它各种颜色,这三种基色的值范围为0~255 * @param 这是以数字型来设置颜色,颜色模式是指使用三种基色:红、绿、蓝,通过三种颜色的调整得出其它各种颜色,这三种基色的值范围为0~255 * @return 描述:返回颜色 */ private Color getRandColor(int fc, int bc) { // 取得给定范围随机颜色 final Random random = new Random(); if (fc > 255) { fc = 255; } if (bc > 255) { bc = 255; } final int r = fc + random.nextInt(bc - fc); final int g = fc + random.nextInt(bc - fc); final int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } /** * 验证码辅助类 */ enum RandCodeImageEnum { /** * 混合字符串 */ ALL_CHAR("0123456789abcdefghijkmnpqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), // 去除小写的l和o这个两个不容易区分的字符; /** * 字符 */ LETTER_CHAR("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"), /** * 小写字母 */ LOWER_CHAR("abcdefghijklmnopqrstuvwxyz"), /** * 数字 */ NUMBER_CHAR("0123456789"), /** * 大写字符 */ UPPER_CHAR("ABCDEFGHIJKLMNOPQRSTUVWXYZ"); /** * 待生成的字符串 */ private String charStr; /** * @param charStr */ private RandCodeImageEnum(final String charStr) { this.charStr = charStr; } /** * 生产随机验证码 * * @param codeLength * 验证码的长度 * @return 验证码 */ public String generateStr(final int codeLength) { final StringBuffer sb = new StringBuffer(); final Random random = new Random(); final String sourseStr = getCharStr(); for (int i = 0; i < codeLength; i++) { sb.append(sourseStr.charAt(random.nextInt(sourseStr.length()))); } return sb.toString(); } /** * @return the {@link #charStr} */ public String getCharStr() { return charStr; } } }
第四步:编写公用的工具类
/** * 项目参数工具类 * */ public class ResourceUtil { private static final ResourceBundle bundle = java.util.ResourceBundle.getBundle("sysConfig"); /** * 获取随机码的长度 * * @return 随机码的长度 */ public static String getRandCodeLength() { return bundle.getString("randCodeLength"); } /** * 获取随机码的类型 * * @return 随机码的类型 */ public static String getRandCodeType() { return bundle.getString("randCodeType"); } }
第五步:配置sysConfig.properties
randCodeLength=4 randCodeType=5
第六步:到这里就大功告成了,可以试试效果了
本文向大家介绍jQuery实现验证码功能,包括了jQuery实现验证码功能的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!
本文向大家介绍Ajax+Struts2实现验证码验证功能实例代码,包括了Ajax+Struts2实现验证码验证功能实例代码的使用技巧和注意事项,需要的朋友参考一下 众所周知,验证码在我们的生活中都是非常常见的,很多公司都在各种折腾各种各样的验证码,这里简要的用一个小案例来实现验证码的功能(ps:其实我挺讨厌验证码这个东西的)。 今天分享的是通过ajax来动态的验证验证码输入是否正确。我们这里采用的
本文向大家介绍PHP实现验证码校验功能,包括了PHP实现验证码校验功能的使用技巧和注意事项,需要的朋友参考一下 验证码的校验是利用PHP中的 SESSION功能来实现。 在最顶端声明函数 session_start(); 告诉服务器我们要用这个函数的功能。 接下来我们用到的就是验证码实现的代码。这里用英文数字的代码为例。 然后在验证码实现之前声明一个空变量,用来存放验证码。 用 POST 方式来接
本文向大家介绍Java如何实现验证码验证功能,包括了Java如何实现验证码验证功能的使用技巧和注意事项,需要的朋友参考一下 Java如何实现验证码验证功能呢?日常生活中,验证码随处可见,他可以在一定程度上保护账号安全,那么他是怎么实现的呢? Java实现验证码验证功能其实非常简单:用到了一个Graphics类在画板上绘制字母,随机选取一定数量的字母随机生成,然后在画板上随机生成几条干扰线。 首先,
本文向大家介绍js+canvas实现验证码功能,包括了js+canvas实现验证码功能的使用技巧和注意事项,需要的朋友参考一下 刚刚开始接触canvas,写个验证码小功能练练手,实现效果图如下: 主要代码如下: html css js 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍python django 实现验证码的功能实例代码,包括了python django 实现验证码的功能实例代码的使用技巧和注意事项,需要的朋友参考一下 我也是刚学Python Django不久很多都不懂,所以我现在想一边学习一边记录下来然后大家一起讨论! 验证码功能一开始我在网上找了很多的demo但是我在模仿他们写的时候,发现在我的版本上根本就不能运行起来在前端页面显示的时候是图
本文向大家介绍Spring Security实现验证码登录功能,包括了Spring Security实现验证码登录功能的使用技巧和注意事项,需要的朋友参考一下 这篇文章主要介绍了Spring Security实现验证码登录功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 在spring security实现登录注销功能的基础上进行开发。 1、添
本文向大家介绍php实现网页端验证码功能,包括了php实现网页端验证码功能的使用技巧和注意事项,需要的朋友参考一下 我们在实际开发中,会用到短信验证码以及网页验证码,相对来说网页验证码的成本比较低,安全系数也还可以,接下来我们就来做一个网页端的验证码,直接上代码: 首先来说一下文件目录结构: |----------phpyanzheng 项目文件夹 |----fonttype