想必大家在注册或者登录某些网站时经常遇到输入验证码这个问题,之前项目中也涉及到这块的开发,今天总结下从验证码生成到输入再到最后是否正确的一个过程。有些人觉得麻烦觉得设计验证码这个环节没有什么必要,其实验证码有效防止某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如网上个人银行,微博登录、今日头条登录等等),我们利用比较简易的方式实现了这个功能。

1.首先用到谷歌的kaptcha-2.3.2.jar,可以去官网上下载这个jar包

2.修改web.xml中的配置,如下图代码

验证码一般都是怎么实现的(超级简单的实现网站输入验证码校验过程)(1)

web.xml

3.页面设计如下图和对应的页面代码(不是专业美工,页面设计有点丑哈)

验证码一般都是怎么实现的(超级简单的实现网站输入验证码校验过程)(2)

页面效果图

验证码一般都是怎么实现的(超级简单的实现网站输入验证码校验过程)(3)

jsp代码

这里有两种方式改变验证码的值:

  1. 通过点击图片本身改变验证码的值

  2. 通过点击a标签“看不清,换一张”来改变验证码的值

这种不同的方式都对应同一个js处理以改变验证码内容的值,点击后触发changeVerifyCode()方法,具体的js代码如下图所示:

验证码一般都是怎么实现的(超级简单的实现网站输入验证码校验过程)(4)

Js代码

友情提示:为了保证提交到后台的验证码不是空,可以在输入框失去焦点的onblur()事件里面判断文本框的值是否为空。(yzm:验证码简称,英语水平比较渣渣)

4.当输入完验证码之后,点击"登录"按钮,页面请求到后台,KaptchaServlet会把验证码设置到session中,所以先去session里面拿到值。后台处理代码如下图:

验证码一般都是怎么实现的(超级简单的实现网站输入验证码校验过程)(5)

后台代码

后台代码处理如果form表单提交的rand值如果跟session里面的值一样就跳转到登录页面,否则就继续停留在这个页面。 当然去官网上可以看到web.xml中可以设置更多关于验证码图片还有很多参数,根据项目需求去添加。

以上是我实现验证码的过程,原理和实现方式都非常简单通俗易懂,如果你有更好的实现方式欢迎一起交流哈。

,