java实现动态验证码源代码——jsp页面
我们通常在其他网站注册或者登陆的时候会发现一个很高大上的验证码,那么怎么用java代码实现呢?下面我给大家贴一下我写的方法: 此文章是写的前台jsp页面的代码:<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":
·
我们通常在其他网站注册或者登陆的时候会发现一个很高大上的验证码,那么怎么用java代码实现呢?下面我给大家贴一下我写的方法:
此文章是写的前台jsp页面的代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String tag=request.getParameter("tag");
request.setAttribute("tag",tag);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>用户登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link href="<%=basePath%>css/common.css" rel="stylesheet" type="text/css" />
<link href="<%=basePath%>css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
if(${tag == 'nologin'}){
alert("对不起,您还没有登录,请先进行登录");
}
});
</script>
<script type="text/javascript" >
$(function(){
//注册
$("#register").click(function(){
location.href="register.jsp";
});
//验证码
$("#changeCode").click(function(event){
$("#validateCode").attr("src","Number.jsp?ran"+Math.random());
event.preventDefault();
return false;
});
//判断验证码输入是否正确
$("#passwords").blur(function(){
$.post(
"doNumrand.jsp",
"inputCode="+$("#passwords").val(),
function(result){
if($.trim(result)=="true"){
$("#cl").html("<span style='color:green'>验证码正确</span>");
}else{
$("#cl").html("<span style='color:red'>验证码错误</span>");
}
}
);
});
});
</script>
<script type="text/javascript">
<%
String msg = request.getParameter("msg");
if("registerSuccess".equals(msg)){
out.print("alert('注册成功,系统将自动跳转登录页');");
}
if("loginError".equals(msg)){
out.print("alert('用户名密码错误,请重新登录');");
}
if("validateCodeError".equals(msg)){
out.print("alert('验证码错误,请重新输入');");
}
%>
</script>
</head>
<body>
<div class="wrap">
<!-- main begin-->
<div class="main">
<div class="sidebar">
<p><img src="images/img1.jpg" width="443" height="314" alt="" /></p>
</div>
<div class="sidebarg">
<form action="login.action" method="post">
<div class="login">
<span style="color:red"><s:property value="msg"/></span>
<dl>
<dt class="blues">用户登陆</dt>
<dd><label for="name">用户名:</label>
<input type="text" name="auctionuser.username" class="inputh" value="${username}" id="name"/></dd>
<dd><label for="password">密 码:</label>
<input type="password" name="auctionuser.userpassword" class="inputh" value="${userpassword}" id="password"/></dd>
<dd>
<label class="lf" for="passwords">验证码:</label>
<input type="text" name="inputCode" class="inputh inputs lf" value="" id="passwords"/>
<span class="wordp lf"><img id="validateCode" src="Number.jsp" width="96" height="27" alt="" /></span>
<span class="blues lf"><a id="changeCode" href="javascript:void(0);" title="">看不清</a> <a id="cl"></a></span>
</dd>
<dd>
<input name="" type="checkbox" id="rem_u" />
<span class="rem_u">下次自动登录</span>
</dd>
<dd class="buttom">
<input name="" type="submit" value="登 录" class="spbg buttombg f14 lf" />
<input id="register" name="" type="button" value="注 册" class="spbg buttombg f14 lf" />
<span class="blues lf"><a href="" title="">忘记密码?</a></span>
<div class="cl"></div>
</dd>
</dl>
</div>
</form>
</div>
<div class="cl"></div>
</div>
<!-- main end-->
<!-- footer begin-->
</div>
<!--footer end-->
</body>
</html>
在这里主要是使用的ajax的方法,当鼠标离开输入验证码的文本框时,进行验证是否输入正确!!
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)