效果图:



1.  首先加入 kaptcha的jar包在工程中kaptcha-2.3.2.jar和kaptcha-2.3.2-jdk14.jar


2. 配置web.xml:对kaptcha的参数进行配置:

<!-- kaptcha验证码配置 -->
	<servlet>
		<!-- 生成图片的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.names</param-name>
			<param-value>宋体,楷体,微软雅黑</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>90</param-value>
		</init-param>
		<!-- 使用哪些字符生成验证码 -->
		<init-param>
			<param-name>kaptcha.textproducer.char.string</param-name>
			<param-value>abcdefghigkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ2345679</param-value>
		</init-param>
		<!-- 图片高度 -->
		<init-param>
			<param-name>kaptcha.image.height</param-name>
			<param-value>40</param-value>
		</init-param>
		<!-- 字体大小 -->
		<init-param>
			<param-name>kaptcha.textproducer.font.size</param-name>
			<param-value>30</param-value>
		</init-param>
		<!-- 干扰线的颜色 
		<init-param> <param-name>kaptcha.noise.color</param-name>
		     <param-value>green</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.background.clear.from</param-name>
			<param-value>green</param-value>
		</init-param>
		<!-- 验证码背景颜色渐进  -->
		<init-param>
			<param-name>kaptcha.background.clear.to</param-name>
			<param-value>white</param-value>
		</init-param>
		<!-- 去掉干扰线 -->
		<init-param>
			<param-name>kaptcha.noise.impl</param-name>
			<param-value>com.google.code.kaptcha.impl.NoNoise </param-value>
		</init-param>
		<!-- 验证码样式引擎  默认为WaterRipple -->
		<init-param>
            <param-name>kaptcha.obscurificator.impl</param-name>
            <param-value>com.google.code.kaptcha.impl.ShadowGimpy</param-value>
        </init-param>
	</servlet>
	<!-- 映射的url -->
	<servlet-mapping>
		<servlet-name>Kaptcha</servlet-name>
		<url-pattern>/Kaptcha.jpg</url-pattern>
	</servlet-mapping>

3. jsp页面展示:

<script type="text/javascript">
$(function(){
    $('#kaptchaImage').click(function () {
        $(this).attr('src', 'Kaptcha.jpg?' + Math.floor(Math.random()*100) );
    });
});
</script>
  <form id="dialog_login_loginForm" method="post">
   <table>
      <tr><th>用户名</th><td><input name="name"  /></td></tr>
      <tr><th>密码</th><td><input name="pwd" type="password"  /></td></tr> 
       <tr><th>验证码</th><td><img id="kaptchaImage" src="Kaptcha.jpg" title="看不清,点击换一张.不区分大小写。"/>
	        <input name="verifyCode" id="verifyCode" style="width:80px;" /></td>
	   </tr> 
   </table>
 </form>

初始化提交提交表单

				$('#dialog_login_loginForm').form({
					url : "${pageContext.request.contextPath}/userAction!login.action",
					success : function(data) {
						var obj = jQuery.parseJSON(data);
						if (obj.success) {
							$.messager.show({
								title : '提示',
								msg : obj.msg,
							});
							loginDialog.dialog('close');
						}else{
							$.messager.show({
								title : '提示',
								msg : obj.msg,
								iconCls:'icon-no',
							});
						}
					}
				});

验证验证码:

//判断验证码输入是否正确
function checkVerifyCode(){
	$.ajax({
		url : "${pageContext.request.contextPath}/userAction!checkVerifyCode.action?verifyCode="+$('#verifyCode').val(),
		success : function(data) {
			var obj = jQuery.parseJSON(data);
			if (obj.success) {
				$('#dialog_login_loginForm').submit();
			}else{
				$.messager.show({
					title : '提示',
					msg : obj.msg,
					iconCls:'icon-no',
				});
			}
		}
	});


Action处理验证:


	public void checkVerifyCode(){
		
		Json j = new Json();
		//获取传过来的验证码
	    String verifyCode =ServletActionContext.getRequest().getParameter("verifyCode");
		 //获取kaptcha生成存放在session中的验证码
        String kaptchaValue = (String) ServletActionContext.getRequest().getSession().getAttribute(com.google.code.kaptcha.Constants.KAPTCHA_SESSION_KEY);
        //比较输入的验证码和实际生成的验证码是否相同
        if(kaptchaValue == null || kaptchaValue == ""||!verifyCode.equalsIgnoreCase(kaptchaValue)) {
            j.setMsg("输入的验证码不正确!");
        }else {
        	j.setSuccess(true);
        }	
        super.writeJson(j);
	}


Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐