获取Session 里面的验证码值,用Ajax进行验证

 

验证码的 生成的例子很多，这里就不再写了..

以下是 用Ajax 对用户输入的验证码和 随机的验证码进行比较. 注册、登陆的时候,往往会用验证码进行验证才能进行操作。

我的验证码的是放在Session里面。

开始尝试着在jsp页面获取 Session 里面的验证码的值,因为验证码是一张图片,所以得把值赋给一个隐藏的文本框内,取得验证码的值之后, 再和用户输入的验证码的值进行比较. 但第一次加载的页面,  隐藏的文本框里面获取的验证码的值第一次总是null,

刷新页面就是第一次验证码的值, 原因是:因为页面先加载,验证码后生成的, 为了解决这个问题,所以用Ajax实现验证码的验证。

 

Ajax : 后台方法

//返回Boolean 值

public boolean checkverifyCode(HttpServletRequest request, String seccode)
 {
       if(seccode==null){
        return false;
   }
  return seccode.equals( request.getSession().getAttribute("rand"));
   }

 

会用ajax的都知道 ,需要对这个方法进行配置.这里就不写了

 

登陆页面 index.jsp

//ajax验证验证码
 <script type="text/javascript">
 var t=new Boolean();

 function checkCode(){

//设置成同步
  DWREngine.setAsync(false);
  var s=DWRUtil.getValue("verifyCode");
  if(s=="") {
  document.getElementById("fst").innerHTML="请输入附加码";
  return false;
  } else {

// 调用后台的方法,传用户输入的验证码的值到后台进行验证
  ajaxService.checkverifyCode(s,dealcode);

//设置成异步
   DWREngine.setAsync(true);
   return t;
  }
 }
 //回调函数
 function dealcode(datacode){
  if(datacode==true){
     t=datacode;
   return  t;
   } else {
   DWRUtil.setValue("fst","验证码错误");
   t=datacode;
 return  t;

  }
 }

 

//提交表单时验证验证码

function login(){

checkCode();

var theForm = document.forms["userloginform"];

if(checkCode()==false)  {
    document.getElementById("user.userpwd").focus();
    return false;
  }    else {

//表单提交
  theForm.submit();
  return true;
  }

}

</script>

 

 

<form name="userloginform" id="userloginform"     action="<%=request.getContextPath()%>/jsp/common/login.do"
      method="post" οnsubmit="return login();">
           <p>
        帐号         <input name="user.userid" id="user.userid"     />
        密码        <input name="user.userpwd" id="user.userpwd" type="password"    />
        附加码   <input name="verifyCode" type="text" class="verifyinput"     id="verifyCode" size="15" maxlength="4"  />    

                        <img id="viewverifypic" src="<%=request.getContextPath()%>/jsp/common/image.do" />
                        <input name="ulbutton" id="ulbutton" type="image"       src="../../images/common/ulbutton.jpg" align="bottom"    />
     
                        <div id="erdivcode" >
                    <span id="fst" style="color: red;font-weight: bold;"></span>
                      </div>
      </form>