验证码使用

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

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

使用这个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" οnblur="checkCode()" required style="color:#999;">
		<img src="Kaptcha.jpg" οnclick="changeVerifyCode()"  id="yzmImg" style="cursor: pointer;" width="130" height="40">
                <a href="javascript:void(0)" οnclick="changeVerifyCode();" >看不清，换一张</a>
		<span id="verifyCode1"></span>
	</div>

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

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