登录界面+验证码

最新推荐文章于 2022-07-15 08:48:28 发布

再远不过PC

最新推荐文章于 2022-07-15 08:48:28 发布

阅读量8.3k

点赞数 5

分类专栏： .....java学习 .....jsp .....JavaScript/jQuery .....Bootstrap

本文链接：https://blog.csdn.net/douboomfly/article/details/72700752

版权

.....jsp 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

.....JavaScript/jQuery

11 篇文章 0 订阅

订阅专栏

.....java学习

7 篇文章 1 订阅

订阅专栏

做一个登录界面+验证码的界面

实现效果：

第一部分、页面：

<div class="container" >
	<h2 style="text-align:center">会员登录 </h2>
	<br>
	<form action="<%=path %>/user/login" method="post" role="form" class="form-horizontal" οnsubmit="return on_submit()" >
		<div class="form-group">
			<label class="col-md-4 control-label" style="text-align:right">登录名称</label>
			<div class="col-md-4">
				<input name="user.userName" id="userName" value="${user.userName}" type="text" class="form-control" placeholder="请输入账号">
			</div>
			<div class="col-md-4"><label class="error" id="userEr">
			<c:if test="${er==4 }">用户名不存在</c:if>
			</label></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label" style="text-align:right">登录密码</label>
			<div class="col-md-4">
			  	<input name="user.pswd" id="pswd" value="${user.pswd }" type="password" class="form-control" placeholder="请输入密码">
			</div>
			<div class="col-md-4"><label class="error" id="pswdEr">
			<c:if test="${er==5 }">密码错误</c:if>
			</label></div>
		</div>
		<div class="form-group">
			<label class="col-md-4 control-label" style="text-align:right">验  证  码</label>
			<div class="col-md-2">
			  	<input name="vali" id="loginCode" type="text" class="form-control" placeholder="请输入验证码">
			</div>
			<div class="col-md-2">
				<img id='imgVcode' src=" <%=path %>/user/checkCode " title="点击图片切换" style="cursor: pointer;" />
			</div>
			<div class="col-md-4"><label class="error" id="codeEr">
			<c:if test="${er==3 }">验证码错误</c:if>
			</label></div>
		</div>
		<div class="form-group">
			<div class="col-md-3 col-md-offset-4">
				<a href="javascript:void(0);" id="checkCode">看不清楚，换一张</a>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-2 col-md-offset-4">
				<input type="submit" class="btn btn-primary btn-block" value="登录" />	
			</div>
			<div class="col-md-2">
				<a class="btn btn-default btn-block" href="">取消</a>
			</div>
		</div>
	</form>
</div>

第二部分、jquery：

$(function(){
	//刷新验证码
	$("#checkCode").click(function(){
		$("#loginCode").val('');
		$("#imgVcode").attr("src", getContextPath()+"/user/checkCode?dt="+new Date().getTime());
	});
	$("#userName").keydown(function(){
		$("#userEr").html("");$("#pswdEr").html("");
	});
	$("#pswd").keydown(function(){
		$("#userEr").html("");$("#pswdEr").html("");
	});
});
function on_submit(){
	if($("#userName").val() == "") {
		$("#userEr").html("请输入用户名");
		//$("#userName").focus();
		return false;
	}
	else if($("#pswd").val() == "") {
		$("#pswdEr").html("请输入密码");
		//$("#pswd").focus();
		return false;
	}
	else if($("#loginCode").val() == "") {
		$("#codeEr").html("请输入验证码");
		//$("#loginCode").focus();
		return false;
	}
}

【重点在于刷新验证码，重新申请验证码】

第三部分、后台：

省略版：只写一个匹配验证码的，匹配账号面的就不写了

String checkCode =(String) session.get("checkCode");
if (checkCode==null || checkCode.equals("")) {
	return "login";
}
System.out.println("验证码："+ checkCode +" "+vali);
if(!checkCode.equals(vali)){
	//没输验证码，验证码不匹配
	er = 3;
	return "login";
}

生成验证码图片的action

private InputStream imageStream;
public String execute(){
	//从 图片工具类 中生成图片
	Map<String,BufferedImage> map = ImageUtil.createImage();
	//获取验证码图片上的字符
	String key = map.keySet().iterator().next();
	session.put("checkCode", key);//   ← 这个是正确答案
	//获取  BufferedImage 对象
	BufferedImage image = map.get(key);
	//将      BufferedImage 赋值给    imageStream
	ByteArrayOutputStream bos = new ByteArrayOutputStream();
	JPEGImageEncoder imageEncoder = JPEGCodec.createJPEGEncoder(bos);
	//System.out.println("codeAction : " + key);
	
	try {
		imageEncoder.encode(image);
		byte[] imageBt = bos.toByteArray();
		imageStream = new ByteArrayInputStream(imageBt);
		return "success" ;
	} catch (Exception e) {
		e.printStackTrace();
		return "fail";
	}
}
public InputStream getImageStream() {
	return imageStream;
}
public void setImageStream(InputStream imageStream) {
	this.imageStream = imageStream;
}

第四部分、生成验证码的图片工具类

private static final String[] chars = { "0", "1", "2", "3", "4", "5", "6",
		"7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H","J","K","L","M","N","P"};
private static final int SIZE = 5;       //图像中 数字或字母   的个数
private static final int LINES = 7;      //图片中     线      的个数
private static final int WIDTH = 100;    //图像的宽度
private static final int HEIGHT = 35;    //图像的高度
private static final int FONT_SIZE = 30; //字体大小

public static Map<String,BufferedImage> createImage() {
	StringBuffer sb = new StringBuffer();//字符串常量 ，要配对的 正确答案
	BufferedImage image = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);//加载一张图片
	Graphics graphic = image.getGraphics(); //绘制图片
	graphic.setColor(Color.WHITE);     //底色
	graphic.fillRect(0, 0, WIDTH, HEIGHT);  //填充
	Random ran = new Random(); //随机函数
	//随机生成 SIZE个数字
	for(int i=1;i<=SIZE;i++){
		int r = ran.nextInt(chars.length);  //在数组长度范围内的随机一个数
		graphic.setColor(getRandomColor()); //随机 数字字母 颜色 
		graphic.setFont(new Font(null, Font.BOLD+Font.ITALIC, FONT_SIZE));
		graphic.drawString(chars[r],(i-1)*WIDTH/SIZE , HEIGHT/3*2);
		sb.append(chars[r]);// Session
	}
	//随机在图片上画线
	for(int i=1;i<=LINES;i++){
		graphic.setColor(getRandomColor());//随机 线 的颜色
		graphic.drawLine(ran.nextInt(WIDTH), ran.nextInt(HEIGHT), ran.nextInt(WIDTH),ran.nextInt(HEIGHT));//随机画线
	}
	Map<String,BufferedImage> map = new HashMap<String,BufferedImage>();
	map.put(sb.toString(), image);
	return map;
}
//生成随机颜色
public static Color getRandomColor(){
	Random ran = new Random();
	Color color = new Color(ran.nextInt(156),ran.nextInt(156),ran.nextInt(156));
	return color;
}