●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误,
这样做的意义是为了保证用户信息的安全(防止登录名泄漏),现在web工程多是这么进行登录用户名和密码的验证
●动态验证码是采用Image的一个servlert实时生成动态验证码,并且servlert将生成的动态验证码保存在session中,在jsp取得到的动态验证码和session中保存的动态验证码进行比较,来判断用户
输入的动态验证码是否准确。
●验证用户名和密码,验证动态验证码是否输入准确都需要通过action进行逻辑判断,而验证用户名,密码,验证码是否为空可以在jsp中用js进行判断,不需要传递到后台。
●具体实现过程:
(1)先建立ImageServlet.java文件,然后在web.xml文件中进行配置。
<servlet>
<servlet-name>ImageAction</servlet-name>
<servlet-class>com.xxx.action.ImageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ImageAction</servlet-name>
<url-pattern>/ImageServlet</url-pattern>
</servlet-mapping>
(2)然后login中,建立几个对应需要显示的信息块,将其都设为display:none,根据需要显示的信息进行设置其显示或者隐藏
1<div class="login_info"style="display:none;" id="loginInfo1">您的密码或账号有误,请重新输入!</div>
2<div class="login_info"style="display:none;" id="loginInfo2">请填写校验码!</div>
3<div class="login_info"style="display:none;" id="loginInfo3">校验码输入有误!</div>
4<div class="login_info" style="display:none;"id="loginInfo4">用户名不能为空!</div>
5<div class="login_info"style="display:none;" id="loginInfo5">密码不能为空!</div>
其中,1和3需要提交给loginAction进行处理,根据查询数据库对用户名和密码进行验证,查询到userlist,若list为空,则说明用户名和密码输入有误,若返回userpo,则说明输入正确,将userpo存入session
//您的密码或账号有误,请重新输入temp==0
List user = service.checkIsExist(username, pwd);
if (user == null ||user.size() == 0) {
request.setAttribute("errorFlag",0);
return"false";
}
userpo = (UserPO)user.get(0);
//校验码输入错误temp == 1
String randPic = (String)this.getHttpServletRequest().getSession().getAttribute("rand");
if(pic==null ||!pic.equalsIgnoreCase(randPic)){
request.setAttribute("errorFlag",1);
return"false";
}
session.setAttribute("userpo",userpo);
对于2,4,5这三种情况,在jsp页面进行js判断,提示用户进行输入,其方法为提交按钮的事件为return clksub(),当这个事件返回true才交表单数据传递给action
其为true的情况则是用户名,密码,验证码都输入的情况,针对情况显示出对应的div
<inputtype="submit" value="" οnclick="return clksub()"οnfοcus="this.blur()"/>
function clksub(){
$("#loginInfo1").css({display:"none"});
$("#loginInfo3").css({display:"none"});
$("#loginInfo4").css({display:"none"});
$("#loginInfo5").css({display:"none"});
$("#loginInfo2").css({display:"none"});
//用户名不能为空
if(document.getElementById("username").value== ""){
$("#loginInfo4").css({display:""});
return false;
}
//密码不能为空
if(document.getElementById("userpwd").value== ""){
$("#loginInfo5").css({display:""});
return false;
}
//请填写校验码2
if(document.getElementById("picid").value== ""){
$("#loginInfo2").css({display:""});
return false;
}
return true;
}
(3)因为在struts.xml文件中对loginAction的配置为
<actionname="loginAction" class="loginAction">
<resultname="success">/index.jsp</result>
<resultname="false">/login.jsp</result>
</action>
故当1,3情况,也就是用户名密码输入错误,验证码输入错误这两种情况,则停留在login页面,login再次加载的时候则需要执行一个函数,来接收errorFlag
对应jsp中的接收errorFlag的元素为
<inputtype="hidden" name="errorFlag" id="errorFlag"value="<%=request.getAttribute("errorFlag") %>" />
//页面进行加载时<bodyοnlοad="initFunc();">
//JS函数为
$(function initFunc(){
var temp=$("#errorFlag").val();
if(temp==0){
//您的密码或账号有误,请重新输入1
$("#loginInfo1").css({display:""});
} else if(temp == 1){
//校验码错误3
$("#loginInfo3").css({display:""});
}
})
根据errorFlag的值来确定是否需要显示相应的div
至此,对login页面的用户名,密码,验证码的处理到此实现