当前位置:文档之家› 登录验证页面jsp

登录验证页面jsp

登录验证页面jsp
登录验证页面jsp

实验二jsp登录、验证页面的制作

一、目的

1、掌握jsp登录页面的几种常用处理技术

2、掌握jsp验证码的生成技术

3、掌握js验证页面的制作

二、内容

请参考附加材料

三、步骤

略,请对照附加材料练习

四、问题

1、登录时,如果后台在验证时发生问题,该如何处理?

2、如果需要记录用户登录日记,你将采用何种技术?

3、如何生成弹出的用户登录界面?

4、验证码的作用是什么?简要说明验证码生成的一般步骤?

5、页面验证一般在哪一端进行?何种情形下验证需要在服务器上进行?

附件1:jsp登录、验证页面技术

一、静态登录界面的设计

首先是用户登录页面login.htm,代码如下:

系统登录



系统登录

用户名
密  码

  

将登录用户输入的信息提交到login.jsp页面进行处理,这里为了方便,不执行数据库的访问操作,直接使用s2098作为登录用户名和密码,但在实际中是要从数据库中读取的,该jsp页面代码实现如下:

<%@ page contentType="text/html;charset=GB2312"%>

<%

if(request.getParameter("uid").equals("s2098")&&request.getParameter("upwd").equals("s2098")) {

session.setAttribute("login","ok");

session.setMaxInactiveInterval(-1);

%>

<%

}else{

out.println("用户名或密码输入错误!");

}

%>

如果登录成功,则设定login的值为ok,提交到下一步验证页面,则进入main.jsp页面,否则,如果输入的用户名和密码不合法就打印错误信息,main.jsp页面代码如下:

<%@ page contentType="text/html;charset=GB2312"%>

<%@ include file="checkvalid.jsp" %>

~WELCOME TO MY HOMEPAGE~

~WELCOME TO MY HOMEPAGE~

<%@ page contentType="text/html;charset=GB2312"%>

<%@ include file="checkvalid.jsp" %>

~WELCOME TO MY HOMEPAGE~

~WELCOME TO MY HOMEPAGE~

这个页面使用<% @ include file="checkvalid.jsp" %>包含了一个jsp页面checkvalid.jsp为了验证输入信息的合法性:

<%

if(session.getAttribute("login")==null||!session.getAttribute("login").equals("ok")){ response.sendRedirect("login.htm");

}

%>

如果输入信息有误,则回到登录页面,重新输入登录信息。

二、后台数据库验证技术

包括前台login.html和后台verifylogin.jsp两个页面组成:

login.html内容:

登录

用户登录


用户名:

onfocus="if(this.value=='Your name')this.value='';">
密码:

onfocus="if(this.value=='Your password')this.value='';">

     


verifylogin.jsp内容:

<%@ page language="java" contentType="text/html;charset=gb2312"

pageEncoding="UTF-8"%>

<%@ page import="java.sql.*"%>

<%@ page import="java.util.*"%>

登录

<%

//获取用户名

String sUserName = request.getParameter ( "txtUserName" );

//获取密码

String sPasswd = request.getParameter ( "txtPassword" );

//登记JDBC驱动程序

Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );

//连接参数与Access不同

String url = "jdbc:mysql://localhost/LearnJSP";

//建立连接

Connection connection = DriverManager.getConnection ( url, "root",

"011124" );

//SQL语句

String sql = "select * from userinfo where username='" + sUserName

+ "' and userpwd = '" + sPasswd + "'";

Statement stmt = connection.createStatement ( );

ResultSet rs = stmt.executeQuery ( sql ); //返回查询结果

//如果记录集非空,表明有匹配的用户名和密码,登陆成功

if ( rs.next ( ) )

{

out.println ( "登录成功!" );

} else

//否则登录失败

{

out.println ( "用户名不存在或密码错误!" );

}

rs.close ( );

stmt.close ( );

connection.close ( );

%>

下面为客户端添加代码验证功能:

登录

用户登录


用户名:

onfocus="if(this.value=='Your name')this.value='';">
密码:

onfocus="if(this.value=='Your password')this.value='';">

     


为服务器端添加代码验证功能:

<%@ page language="java" contentType="text/html;charset=gb2312" pageEncoding="UTF-8"%>

<%@ page import="java.sql.*"%>

<%@ page import="java.util.*"%>

登录

<%

//获取用户名

String sUserName = request.getParameter ( "txtUserName" );

if ( sUserName == "" || sUserName == null || sUserName.length()>20 ) {

  try

{

response.sendRedirect ( "login.html" );

} catch ( Exception e )

{

}

}

//获取密码

String sPasswd = request.getParameter ( "txtPassword" );

if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )

{

try

{

response.sendRedirect ( "login.html" );

} catch ( Exception e )

{

}

}

//登记JDBC驱动程序

Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );

//连接参数与Access不同

String url = "jdbc:mysql://localhost/LearnJSP";

//建立连接

Connection connection = DriverManager.getConnection ( url, "root",

"011124" );

//SQL语句

String sql = "select * from userinfo where username='" + sUserName

+ "' and userpwd = '" + sPasswd + "'";

Statement stmt = connection.createStatement ( );

ResultSet rs = stmt.executeQuery ( sql ); //返回查询结果

//如果记录集非空,表明有匹配的用户名和密码,登陆成功

if ( rs.next ( ) )

{

//登录成功后将sUserName设置为session变量的UserName

//这样在后面就可以通过session.getAttribute("UserName") 来获取用户名,//同时这样还可以作为用户登录与否的判断依据

session.setAttribute ( "UserName", sUserName );

out.print ( "登录成功!" );

out.print ( session.getAttribute ( "UserName" ) + " 欢迎您!" );

} else

//否则登录失败

{

out.println ( "用户名不存在或密码错误!" );

}

rs.close ( );

stmt.close ( );

connection.close ( );

%>

数据库中所有表的字段长度的设计标准是应该是足够用,但不浪费存储空间.

可以发现,上面数据库中字段限制在20个字符以内,那么程序中也应该作一个限制, 否则可能给网站出现严重的问题.

将上面源码修改如下:

.....

size="20" maxlength="20"

onfocus="if(this.value=='Your name')this.value='';">
密码:

size="20" maxlength="20"

onfocus="if(this.value=='Your password')this.value='';">

.....

.....

if ( sUserName == "" || sUserName == null || sUserName.length()>20 )

....

if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )

......

三、javabean验证技术

login.html页面的实现代码如下:

[人员登录]

员工编码:

员工密码:

在login.html的请求的页面login.jsp中输入以下代码:

<%@ include file="../includebean.jsp" %>

[登录验证]

<%@ page import="java.io.*" %>

<% request.setCharacterEncoding("GBK");%>

<%

if( employeeMgr.logIn(request.getParameter("emp_id"),request.getParameter("password"))== false){

out.print("登录失败!");

%>

<% }

else{

session.setAttribute("userid",request.getParameter("emp_id"));

%>

<%

}

includebean.jsp文件的内容如下:

<%@ page contentType="text/html; charset=GBK" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.dbmgr.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.basic.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.degreemgr.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.departmentmgr.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.employeemgr.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.resultmgr.*" %>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.util.*"%>

<%@ page import="https://www.doczj.com/doc/ec16506585.html,soft.attendance.workinstmgr.*"%>

<%@ page import="java.util.*" %>

<%

degreeMgr.create(); %>

<% departmentMgr.create(); %>

<% employeeMgr.create(); %>

<% resultMgr.create(); %>

<% workinstMgr.create(); %>

说明:除了上述常用的技术外,还有许多的技术,譬如使用读取xml进行验证,加密解密验证等等。用户登录验证的技术五花八门,希望在平时的学习过程将这些技术记录下来,以到需要时可以参考。

附件2:JSP彩色验证码

生成有4个随机数字和杂乱背景的图片,数字和背景颜色会改变,服务器端刷新(用history.go(-1)也会变)

产生验证码图片的文件image.jsp

<%@ page contentType="image/jpeg" import="java.awt.*,

java.awt.image.*,java.util.*,javax.imageio.*" %>

<%!

Color getRandColor(int fc,int bc){//给定范围获得随机颜色

Random random = new Random();

if(fc>255) fc=255;

if(bc>255) bc=255;

int r=fc+random.nextInt(bc-fc);

int g=fc+random.nextInt(bc-fc);

int b=fc+random.nextInt(bc-fc);

return new Color(r,g,b);

}

%>

<%

//设置页面不缓存

response.setHeader("Pragma","No-cache");

response.setHeader("Cache-Control","no-cache");

response.setDateHeader("Expires", 0);

// 在内存中创建图象

int width=60, height=20;

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文

Graphics g = image.getGraphics();

//生成随机类

Random random = new Random();

// 设定背景色

g.setColor(getRandColor(200,250));

g.fillRect(0, 0, width, height);

//设定字体

g.setFont(new Font("Times New Roman",Font.PLAIN,18));

//画边框

//g.setColor(new Color());

//g.drawRect(0,0,width-1,height-1);

// 随机产生155条干扰线,使图象中的认证码不易被其它程序探测到

g.setColor(getRandColor(160,200));

for (int i=0;i<155;i++)

{

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(12);

int yl = random.nextInt(12);

g.drawLine(x,y,x+xl,y+yl);

}

// 取随机产生的认证码(4位数字)

String sRand="";

for (int i=0;i<4;i++){

String rand=String.valueOf(random.nextInt(10));

sRand+=rand;

// 将认证码显示到图象中

g.setColor(new

Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); //调用函数出来的颜色相同,可能是因为种子太接近,所以只能直接生成

g.drawString(rand,13*i+6,16);

}

// 将认证码存入SESSION

session.setAttribute("rand",sRand);

// 图象生效

g.dispose();

// 输出图象到页面

ImageIO.write(image, "JPEG", response.getOutputStream());

%>

使用验证码图片的文件a.jsp

<%@ page contentType="text/html;charset=gb2312" %>

认证码输入页面

验证的页面check.jsp

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %>

认证码验证页面

<%

String rand = (String)session.getAttribute("rand");

String input = request.getParameter("rand");

%>

系统产生的认证码为:<%= rand %>

您输入的认证码为:<%= input %>


<%

if (rand.equals(input)) {

%>

输入相同,认证成功! <%

} else {

%>

输入不同,认证失败! <%

}

%>

其他的验证码生成技术请同学们自己收集。

附件3:js验证表单大全

js验证表单大全

1. 长度限制

2. 只能是汉字

3." 只能是英文

4. 只能是数字

或者

或者:

5. 只能是英文字符和数字

6. 验证油箱格式

7. 屏蔽关键字(这里屏蔽***和****)

8. 两次输入密码是否相同

够了吧:)

屏蔽右键很酷

oncontextmenu="return false" ondragstart="return false" onselectstart="return false" 加在body中

2.1 表单项不能为空

2.2 比较两个表单项的值是否相同

2.3 表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等

"; }else{ echo"

验证码输入错误,请重新输入!
"; } } else{ echo"
用户名或密码输入错误
"; session_destroy(); } } ?>
系统产生的认证码:
输入上面的认证码: