Java登录页面实时验证用户名密码和动态验证码

●登录名和密码是同时验证的，并不是先验证登录名是否存在，然后再验证密码是否正确，是同时进行验证，若登录名和密码当中一个条件不符合，则提示用户登录名或者密码错误，

这样做的意义是为了保证用户信息的安全（防止登录名泄漏），现在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页面的用户名，密码，验证码的处理到此实现