野兽

手机验证码认证(前台)

用户登录-需要手机下发验证码进行确认

 如上图,在登录之后进入首页之前加入验证

前台代码:用到了easyui的架构

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/pages/commons/taglibs.jsp"%>

<html>
<head>
<base href="${basePath}" />
<%@ include file="/WEB-INF/pages/commons/meta.jsp"%>
<title>手机认证</title>
<link rel="stylesheet" type="text/css" href="scripts/jqueryEasyUI/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="scripts/jqueryEasyUI/themes/icon.css">
<style >
    body{ font-family:Arial, Helvetica, sans-serif;}
    a{text-decoration: none;}
</style>
 <script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.easyui.min1.js"></script>
 <script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="scripts/jqueryEasyUI/src/jquery.datagrid.js"></script>
    <script type="text/javascript">
     $(function(){
    
   var dlg = $('#dlg1').dialog({
    width:350,
    height:265,
    modal:true,
    buttons:{
     '确定':function(){
    $('#lo').attr('action','user/liceLogin');
      $('#lo').submit();
      return false;
     }
    }
   });
  });
 
  function open1(){
   $('#dlg1').dialog({
    showType:null
   });
  }
 </script>
 <script type="text/javascript">
 $(function(){
    var ci = "${num}";
       if(ci != 5){
        document.getElementById("pass").style.display = 'block';
        
       }
 });
 </script>
 <script language="javascript">
 var wait = "${times}";
 //设置秒数(单位秒)
 var i = 0;
 var iid = 0;
 iid = setInterval("sTimer()",1000);
 function sTimer() {   
  var r=wait-i;     
  if(r==0)   {    
   clearInterval(iid);    
   document.getElementById("BtnOk").value=" 重新获取";     
   document.getElementById("BtnOk").disabled=false;   }  
  else   {    
   document.getElementById("BtnOk").value="("+r+")秒之后可重新获取";   
    i++;  
    }
  }
  </script>
  <script type="text/javascript">
   function agSendCode(){
    $('#lo').attr('action','user/agSendPhoneCode');
    $('#lo').submit();
   }
  </script>
</head>
<body style=" padding:0; margin:0; font-size:12px">
<div id="dlg1" title="手机认证" style="width:420px;">
  <div style="padding:20px;">
   <div><form  action="user/liceLogin" id="lo">
   <div><a>为了您的帐户安全,请先进行安全认证。</a><br /><br /> </div>
   <div><a>您认证的安全手机为:${m3}****${m4 }</a></div>
   <div> <br />验证码:<input id="code" name="code" size="6"/> <input size="7" id="BtnOk" type="button" disabled="disabled" value="90秒之后可重新获取" onclick="agSendCode()"></input></div>
   <div>
    <div id="pass" style="display:none" > <a style="color: red;">输入错误:你还有${num }次机会,输错五次账户将锁定</a></div>
    <input id="num" name="num" type="hidden"  value="${num }">
   </div>

</form>
         </div>
  </div>
</div>

</body>
</html>

后台直接调用一个发短信的方法,这里就不列出了

posted @ 2012-11-18 16:10  android-susu  阅读(653)  评论(0编辑  收藏  举报