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

实验二jsp登录、验证页面的制作一、目的1、掌握jsp登录页面的几种常用处理技术2、掌握jsp验证码的生成技术3、掌握js验证页面的制作二、内容请参考附加材料三、步骤略，请对照附加材料练习四、问题1、登录时，如果后台在验证时发生问题，该如何处理？2、如果需要记录用户登录日记，你将采用何种技术？3、如何生成弹出的用户登录界面？4、验证码的作用是什么？简要说明验证码生成的一般步骤？5、页面验证一般在哪一端进行？何种情形下验证需要在服务器上进行？附件１：jsp登录、验证页面技术一、静态登录界面的设计首先是用户登录页面login.htm，代码如下：htmlheadtitle系统登录/titlestyletype=text/css!--.style1{...}{font-size:18px;font-weight:bold;}.style2{...}{font-size:24px}.style5{...}{font-size:16px}--/style/headbodybgcolor=papayawhipwidth=300height=300centertableborder=2bordercolor=blackbgcolor=lightgreentbodytrtddivalign=centerclass=style1style2系统登录/div/td/trformaction=login.jspmethod=posttrtdheight=28spanclass=style5用户名/spaninputtype=textname=uidmaxlength=20style=width:150/td/trbrtrtdspanclass=style5密  码/spaninputtype=passwordname=upwdmaxlength=20style=width:150/td/trbrcentertrtddivalign=centerinputtype=submitvalue=登录  inputtype=resetvalue=取消/div/td/tr/center/form/tbody/table/center/body/html将登录用户输入的信息提交到login.jsp页面进行处理，这里为了方便，不执行数据库的访问操作，直接使用s2098作为登录用户名和密码，但在实际中是要从数据库中读取的，该jsp页面代码实现如下：%@pagecontentType=text/html;charset=GB2312%%if(request.getParameter(uid).equals(s2098)&&request.getParameter(upwd).equals(s2098)){session.setAttribute(login,ok);session.setMaxInactiveInterval(-1);%jsp:forwardpage=main.jsp/%}else{out.println(用户名或密码输入错误！);}%如果登录成功，则设定login的值为ok，提交到下一步验证页面，则进入main.jsp页面，否则，如果输入的用户名和密码不合法就打印错误信息，main.jsp页面代码如下：%@pagecontentType=text/html;charset=GB2312%%@includefile=checkvalid.jsp%htmlheadtitle~WELCOMETOMYHOMEPAGE~/title/headbodycenter~WELCOMETOMYHOMEPAGE~/center/body/html%@pagecontentType=text/html;charset=GB2312%%@includefile=checkvalid.jsp%htmlheadtitle~WELCOMETOMYHOMEPAGE~/title/headbodycenter~WELCOMETOMYHOMEPAGE~/center/body/html这个页面使用%@includefile=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内容:htmlheadtitle登录/titlemetahttp-equiv=content-typecontent=text/html;charset=UTF-8metahttp-equiv=Content-Languagecontent=ch-cn/headbody!--Form用来提取用户填入并提交的信息--formmethod=postname=frmLoginaction=verifylogin.jsph1align=center用户登录/h1brdivalign=center用户名：inputtype=textname=txtUserNamevalue=Yournameonfocus=if(this.value=='Yourname')this.value='';br密码：inputtype=passwordname=txtPasswordvalue=Yourpasswordonfocus=if(this.value=='Yourpassword')this.value='';brinputtype=submitname=Submitvalue=提交     inputtype=resetname=Resetvalue=重置br/div/form/body/htmlverifylogin.jsp内容:%@pagelanguage=javacontentType=text/html;charset=gb2312pageEncoding=UTF-8%%@pageimport=java.sql.*%%@pageimport=java.util.*%!DOCTYPEHTMLPUBLIC-//W3C//DTDHTML4.01Transitional//ENhtmlheadtitle登录/titlemetahttp-equiv=pragmacontent=no-cachemetahttp-equiv=cache-controlcontent=no-cachemetahttp-equiv=expirescontent=0metahttp-equiv=keywordscontent=keyword1,keyword2,keyword3metahttp-equiv=descriptioncontent=Thisismypage!--linkrel=stylesheettype=text/csshref=styles.css--/headbodydivalign=center%//获取用户名StringsUserName=request.getParameter(txtUserName);//获取密码StringsPasswd=request.getParameter(txtPassword);//登记JDBC驱动程序Class.forName(org.gjt.mm.mysql.Driver).newInstance();//连接参数与Access不同Stringurl=jdbc:mysql://localhost/LearnJSP;//建立连接Connectionconnection=DriverManager.getConnection(url,root,011124);//SQL语句Stringsql=select*fromuserinfowhereusername='+sUserName+'anduserpwd='+sPasswd+';Statementstmt=connection.createStatement();ResultSetrs=stmt.executeQuery(sql);//返回查询结果//如果记录集非空，表明有匹配的用户名和密码，登陆成功if(rs.next()){out.println(登录成功！);}else//否则登录失败{out.println(用户名不存在或密码错误！);}rs.close();stmt.close();connection.close();%/body/html下面为客户端添加代码验证功能:htmlheadtitle登录/titlemetahttp-equiv=content-typecontent=text/html;charset=UTF-8metahttp-equiv=Content-Languagecontent=ch-cn/headbody!--Form用来提取用户填入并提交的信息--formmethod=postname=frmLoginaction=verifylogin.jsph1align=center用户登录/h1brdivalign=center用户名：inputtype=textname=txtUserNamevalue=Yournameonfocus=if(this.value=='Yourname')this.value='';br密码：inputtype=passwordname=txtPasswordvalue=Yourpasswordonfocus=if(this.value=='Yourpassword')this.value='';brinputtype=submitname=Submitvalue=提交onClick=validateLogin();     inputtype=resetname=Resetvalue=重置br/div/form!--javaScript函数validateLogin(),用来验证用户名和密码是否为空--scriptlanguage=javaScriptfunctionvalidateLogin(){varsUserName=document.frmLogin.txtUserName.value;varsPassword=document.frmLogin.txtPassword.value;if(sUserName==){alert(请输入用户名！);returnfalse;}if(sPassword==){alert(请输入密码！);returnfalse;}}/script/body/html为服务器端添加代码验证功能:%@pagelanguage=javacontentType=text/html;charset=gb2312pageEncoding=UTF-8%%@page