两种⽅法实现带验证码的⽤户登录
带验证码的登录效果图
登录成功时，记录⽤户名和访问次数
登录失败，弹出错误提⽰
⽅法⼀：应⽤request对象获取表单数据实现登录操作
代码结构：
index.jsp源码及详解：
<form name="form1" method="POST" action="check.jsp">
当表单被提交时，数据会被提交到check.jsp中去，此处表单的提交实在js的mycheck()⽅法中完成的。
String intsum=intmethod+""+intmethod2+intmethod3+intmethod4；此处+""是为了将int数据类型转为String类型。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录页⾯</title>
</head>
<script type="text/javascript">
function mycheck(){//定义mycheck()⽅法
if(form1.UserName.value==""){
alert("⽤户名不能为空！");
form1.UserName.focus();
return;
}
if(form1.PWD.value==""){
alert("密码不能为空！");
form1.PWD.focus();
return;
}
if(form1.yanzheng.value==""){
alert("验证码不能为空！");
form1.yanzheng.focus();
return;
}
form1.submit();
}
</script>
<body>
<form name="form1" method="POST" action="check.jsp">
⽤户名：<input name="UserName" type="text"><br><br>
密 ；码：<input name="PWD" type="password"><br><br>
验证码：<input name="yanzheng" type="text" size="8">
<%
/
/获取0~9的随机数
int intmethod=(int)((((Math.random())*11))-1);
int intmethod2=(int)((((Math.random())*11))-1);
int intmethod3=(int)((((Math.random())*11))-1);
int intmethod4=(int)((((Math.random())*11))-1);
//加⼊""是为了让int类型转为String类型。
//int类型和字符串类型相加，为字符串类型.
String intsum=intmethod+""+intmethod2+intmethod3+intmethod4;
%>
<input type="hidden" name="vcode" value="<%=intsum%>">
<img src="num/<%=intmethod%>.gif">
<img src="num/<%=intmethod2%>.gif">
<img src="num/<%=intmethod3%>.gif">
<img src="num/<%=intmethod4%>.gif">
<br>
<br>
<input name="Submit" type="button" class="submit1" value="登录" onClick="mycheck()">
<!-- type="reset" 重置表单 -->html怎么实现登录验证功能
<input name="Submit2" type="reset" class="submit1" value="重置">
</form>
</body>
</html>
check.jsp源码及详解：
此处有两种页⾯的跳转⽅式
jsp中： response.sendRedirect("main.jsp");
js中：window.location.href='index.jsp';
使⽤Parameter("name值")获取表单提交的数据
使⽤session.setAttribute("name", name)，是将name保存到session范围内“name”变量中。
使⽤Attribute("name")是从name中取出之前保存的数据。
response.sendRedirect("⽬标路径")；实现页⾯的跳转。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
//设置编码⽅式，防⽌中⽂乱码
request.setCharacterEncoding("UTF-8");
//使⽤Parameter("")获取表单提交的数据
String Parameter("UserName");
String Parameter("PWD");
String Parameter("yanzheng");
String message;
if(!yanzheng.Parameter("vcode"))){
message="验证码输⼊有误";
}else if(name.equals("mr")&&password.equals("123456")){
message="登录成功";
//将name保存到session范围内“name”变量中，使⽤get⽅法可获取name
session.setAttribute("name", name);
//成功页⾯跳转
response.sendRedirect("main.jsp");
}else{
message="⽤户名或密码错误！";
}
%>
<script>
alert("<%=message %>");
//在js中实现页⾯的跳转
//当输⼊信息有误时，重新跳转到登陆界⾯
window.location.href='index.jsp';
</script>
<title>验证中...</title>
</head>
<body>
</body>
</html>
main.jsp的源码及详解：
巧妙使⽤session.setAttribute()和Attribute()实现页⾯计数。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录成功！</title>
</head>
<body>
⽤户名：<%=Attribute("name").toString() %>
<%int number=0;
Attribute("number")==null){
number=1;
}else{
number=Integer.Attribute("number").toString());
number=number+1;
}
out.print("您是第"+number+"次访问");
session.setAttribute("number", number);
%>
</body>
</html>
⽅法⼆：应⽤JavaBean获取表单数据实现登录操作
代码结构
javaBean代码：
JavaBean规范：
（1）JavaBean 类必须是⼀个公共类，并将其访问属性设置为 public ，如： public class user{ …}
（2）JavaBean 类必须有⼀个空的构造函数：类中必须有⼀个不带参数的公⽤构造器，例如：public User() {…}（3）⼀个javaBean类不应有公共实例变量，类变量都为private ，如： private int id;
( 4 )javaBean属性是具有getter/setter⽅法的成员变量。
package com.wgh;
public class UserBean {
private String name="";
private String pwd="";
private String yanzheng="";
private String vcode="";
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPwd() {
return pwd;
}
public void setPwd(String pwd) {
this.pwd = pwd;
}
public String getYanzheng() {
return yanzheng;
}
public void setYanzheng(String yanzheng) {
this.yanzheng = yanzheng;
}
public String getVcode() {
return vcode;
}
public void setVcode(String vcode) {
this.vcode = vcode;
}
}
index.jsp源码
<form name="form1" method="POST" action="check.jsp">
当表单被提交时，数据会被提交到check.jsp中去，此处表单的提交实在js的mycheck()⽅法中完成的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>正在登录</title>
</head>
<script type="text/javascript">
function mycheck(){
if(form1.name.value==""){
alert("⽤户名不能为空！");
form1.name.focus();
return;
}
if(form1.pwd.value==""){
alert("密码不能为空！");
form1.PWD.focus();
return;
}
if(form1.yanzheng.value==""){
alert("验证码不能为空！");
form1.yanzheng.focus();
return;
}
form1.submit();
}
</script>
<body>
<form name="form1" method="POST" action="check.jsp">
⽤户名：<input name="name" type="text"><br><br>
密 ；码：<input name="pwd" type="password"><br><br>
验证码：<input name="yanzheng" type="text" size="8">
<%
int intmethod=(int)((((Math.random())*11))-1);
int intmethod2=(int)((((Math.random())*11))-1);
int intmethod3=(int)((((Math.random())*11))-1);
int intmethod4=(int)((((Math.random())*11))-1);
String intsum=intmethod+""+intmethod2+intmethod3+intmethod4;
%>
<input type="hidden" name="vcode" value="<%=intsum%>">
<img src="num/<%=intmethod%>.gif">
<img src="num/<%=intmethod2%>.gif">
<img src="num/<%=intmethod3%>.gif">
<img src="num/<%=intmethod4%>.gif">
<br>
<br>
<input name="Submit" type="button" class="submit1" value="登录" onClick="mycheck()">
<input name="Submit2" type="reset" class="submit1" value="重置">
</form>
</body>
</html>
check.jsp源码
<jsp:useBean id="user" scope="page" class="com.wgh.UserBean" type="com.wgh.UserBean"> 实例化javaBean对象，对象名为user
<jsp:setProperty name="user" property="*"/> 设置user对象的值，将表单中的数据写⼊javabean中去。使⽤property="*"要保证表单中各元素的name值与javabean中定义的属性名保持⼀致。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:useBean id="user" scope="page" class="com.wgh.UserBean" type="com.wgh.UserBean">
<jsp:setProperty name="user" property="*"/>
</jsp:useBean>
<title>⽤户名与密码验证中...</title>
</head>
<body>
<%
String Yanzheng();
String Name();
String Pwd();
String Vcode();
String message;
if(!yanzheng.equals(vcode)){
message="验证码输⼊有误！";
}else if(name.equals("mr")&&pwd.equals("123456")){
message="登陆成功";
session.setAttribute("name", Name());
response.sendRedirect("main.jsp");
message="⽤户名或密码错误！";
}
%>
<script>
alert("<%=message%>")
window.location.href('index.jsp');
</script>
</body>
</html>
main.jsp源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登录成功！</title>
</head>
<body>
⽤户名：<%=Attribute("name")%>
<%int number=0;
Attribute("number")==null){
number=1;
}else{
number=Integer.Attribute("number").toString()); number=number+1;
}
out.print("您是第"+number+"次访问");
session.setAttribute("number", number);
%>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论