验证码使用

来源：互联网发布：正版office办公软件编辑：程序博客网时间：2024/06/12 18:11

很多网站都要加验证码，主要就是防止机器破解。

下面介绍一个简单的验证码使用方法（就是数字那种）

使用这个jar ----kaptcha-2.3.2.jar

jar包连接

web-xml

<!-- 验证码类库加载 --><servlet><servlet-name>Kaptcha</servlet-name><servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class><!-- 是否有边框 --><init-param><param-name>kaptcha.border</param-name><param-value>no</param-value></init-param><!-- 字体颜色 --><init-param><param-name>kaptcha.textproducer.font.color</param-name><param-value>red</param-value></init-param><!-- 图片宽度 --><init-param><param-name>kaptcha.image.width</param-name><param-value>135</param-value></init-param><!-- 使用哪些字符生成验证码 --><init-param><param-name>kaptcha.textproducer.char.string</param-name><param-value>ACDEFHKPRSTWX345679</param-value></init-param><!-- 图片高度 --><init-param><param-name>kaptcha.image.height</param-name><param-value>50</param-value></init-param><!-- 字体大小 --><init-param><param-name>kaptcha.textproducer.font.size</param-name><param-value>43</param-value></init-param><!-- 干扰线的颜色 --><init-param><param-name>kaptcha.noise.color</param-name><param-value>black</param-value></init-param><!-- 字符个数 --><init-param><param-name>kaptcha.textproducer.char.length</param-name><param-value>4</param-value></init-param><!-- 使用哪些字体 --><init-param><param-name>kaptcha.textproducer.font.names</param-name><param-value>Arial</param-value></init-param></servlet><!-- 映射的url --><servlet-mapping><servlet-name>Kaptcha</servlet-name><url-pattern>/Kaptcha.jpg</url-pattern></servlet-mapping>

<pre name="code" class="html"><!-- 检查验证码是否输入正确 --><servlet><servlet-name>VerifyServlet</servlet-name><servlet-class>com.qykh.mbj.util.VerifyServlet</servlet-class></servlet><servlet-mapping><servlet-name>VerifyServlet</servlet-name><url-pattern>/servlet/VerifyServlet</url-pattern></servlet-mapping>

页面index.html

 function  changeVerifyCode(){       $(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random()*100) );     }    //修改验证码触发的函数     function  checkCode(){     var verifyCodeValue = $("#verifyCode").val();        if(verifyCodeValue.replace(/\s/g,"") == "") {           $("#verifyCode1").html("请输入验证码");        }else {            //异步检查验证码是否输入正确               var verifyUrl = "${pageContext.request.contextPath}/servlet/VerifyServlet?verifyCode="+verifyCodeValue;            $.ajax({            type:"GET",                    url:verifyUrl,                success:function(data){             if(data!="Y") {                             $("#verifyCode1").html("验证码不正确");                             $("#verifyCode").val(""); //清空                         }else {                            $("#verifyCode1").html("");                         }                },                error:function(e){                    alert(e);                }            });        }    }

<div class="form-group"><label for="" ><img src="images/member/XX.jpg">验证码：</label><input type="text" name="verifyCode" id="verifyCode" class="sradd kapkey" onblur="checkCode()" required style="color:#999;"><img src="Kaptcha.jpg" onclick="changeVerifyCode()"  id="yzmImg" style="cursor: pointer;" width="130" height="40">                <a href="javascript:void(0)" onclick="changeVerifyCode();" >看不清，换一张</a><span id="verifyCode1"></span></div>

这里解释一下，就是你写一个img ，点击后调用js 请求配置的katcha.jpg得到一个url地址，显示出来就行了。校验就是调用自己的写的那个类，ajax

原理篇我会再发一个帖子。

0 0