zoukankan      html  css  js  c++  java
  • 手机验证码认证(前台) android

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

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

    前台代码:用到了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({
        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="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>

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

    守护
  • 相关阅读:
    死磕 java集合之TreeMap源码分析(二)- 内含红黑树分析全过程
    死磕 java集合之TreeMap源码分析(一)- 内含红黑树分析全过程
    死磕 java集合之WeakHashMap源码分析
    死磕 java集合之LinkedHashMap源码分析
    Redis的持久化——RDB
    Redis常见配置redis.conf
    Redis的数据类型及相关操作命令
    django-Ajax发送POST请求-csrf跨站请求的三种方式
    Python基础
    RvmTranslator6.0
  • 原文地址:https://www.cnblogs.com/suhe/p/2775987.html
Copyright © 2011-2022 走看看