find_password2.ftl 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>${(systemInfo.systemTitle)!}-找回密码</title>
  7. <link href="/login/css/bootstrap.min.css" rel="stylesheet">
  8. <link href="/login/css/font-awesome.css" rel="stylesheet">
  9. <link href="/login/css/animate.css" rel="stylesheet">
  10. <link href="/login/css/style.css" rel="stylesheet">
  11. <link href="/login/css/find-password.css" rel="stylesheet">
  12. <#--<#include "/common/link.template">-->
  13. </head>
  14. <body style="background-color:#FEFEFE;padding-bottom: 0">
  15. <#include "/login/find_password_top.ftl">
  16. <div class="content">
  17. <div class="web-width">
  18. <div class="for-liucheng">
  19. <div class="liulist for-cur"></div>
  20. <div class="liulist for-cur"></div>
  21. <div class="liulist"></div>
  22. <div class="liulist"></div>
  23. <div class="liutextbox">
  24. <div class="liutext for-cur"><em>1</em><br /><strong>填写账户名</strong></div>
  25. <div class="liutext for-cur"><em>2</em><br /><strong>验证身份</strong></div>
  26. <div class="liutext"><em>3</em><br /><strong>设置新密码</strong></div>
  27. <div class="liutext"><em>4</em><br /><strong>完成</strong></div>
  28. </div>
  29. </div><!--for-liucheng/-->
  30. <div class="col-md-5" style="margin-left: 400px">
  31. <div class="ibox-content">
  32. <p>&nbsp;</p>
  33. <h1>验证身份</h1>
  34. <form class="m-t" role="form" method="post">
  35. <div class="form-group has-feedback">
  36. <label>验证方式</label>
  37. <#--获取 初始化find_password2 页面时的验证方式-->
  38. <div id="checkMode_receive" style="display: none">${(checkMode)!}</div>
  39. <select id="checkMode" class="form-control" onchange="changeCheckMode()">
  40. <option value="1">已验证手机</option>
  41. <option value="2">已验证邮箱</option>
  42. </select>
  43. </div>
  44. <div class="form-group has-feedback">
  45. <label>用户名</label>
  46. <input type="text" id="username" name="username" readonly="readonly" class="form-control" value="${(username)!}">
  47. </div>
  48. <div class="form-group has-feedback" id="mobileDiv" style="display:;">
  49. <label>手机</label>
  50. <input type="text" id="mobile" name="mobile" readonly="readonly" class="form-control" value="${(mobile)!}">
  51. </div>
  52. <div class="form-group has-feedback" id="mailDiv" style="display: none">
  53. <label>邮箱</label>
  54. <input type="text" id="mail" name="mail" readonly="readonly" class="form-control" value="${(mail)!}">
  55. </div>
  56. <div class="form-group has-feedback">
  57. <label style="display: block">校验码</label>
  58. <input type="text" id="checkCode" name="checkCode" class="form-control" maxlength="6" style="width: 50%;display: inline-block;" required placeholder="验证码">
  59. <button type="button" class="btn-primary btn" onclick="getCheckCode()" style="display: inline-block;" id="checkCodeBtn">获取验证码</button>
  60. <div id="msg" style="color: red;display: inline-block">${(checkMsg)!}</div>
  61. </div>
  62. <button type="button" onclick="check()" id="submit" class="btn btn-primary block m-b "
  63. style="width: 120px;margin-left: 156px;">提交
  64. </button>
  65. </form>
  66. </div>
  67. </div>
  68. </div><!--web-width/-->
  69. </div><!--content/-->
  70. <!-- Mainly scripts -->
  71. <script src="/login/js/jquery-2.1.1.js"></script>
  72. <script>
  73. //当验证方式改变时 调用此方法
  74. function changeCheckMode(){
  75. var checkMode=$("#checkMode").val();
  76. if(checkMode=='1'){
  77. $("#mailDiv").hide();
  78. $("#mobileDiv").show();
  79. }else if(checkMode=='2'){
  80. $("#mobileDiv").hide();
  81. $("#mailDiv").show();
  82. }
  83. }
  84. //ajax 验证短信/邮箱验证码
  85. function check() {
  86. var checkCode=$("#checkCode").val();
  87. var username=$("#username").val();
  88. if(!checkCode || checkCode==''){
  89. $("#msg").html("请填写验证码");
  90. }else{
  91. $.ajax({
  92. type:"POST",
  93. dataType:"json",
  94. data:{"username":username,"checkCode":checkCode},
  95. url:"/findPwd/check",
  96. success:function (resultStr) {
  97. var result=eval('('+resultStr+')');
  98. if(result.success){
  99. window.location.replace("/findPwd/findPwd3");
  100. }else{
  101. $("#msg").html(result.msg);
  102. }
  103. }
  104. });
  105. }
  106. }
  107. function getCheckCode() {
  108. var username=$("#username").val();
  109. var checkMode=$("#checkMode").val();
  110. if(checkMode=='1'){
  111. var mobile=$("#mobile").val();
  112. if(!mobile || mobile==""){
  113. $("#msg").html("手机号为空");
  114. return;
  115. }
  116. }else{
  117. var mail=$("#mail").val();
  118. if(!mail || mail==""){
  119. $("#msg").html("邮箱为空");
  120. return;
  121. }
  122. }
  123. $.ajax({
  124. type:"GET",
  125. data:{"username":username,"checkMode":checkMode},
  126. dataType:"json",
  127. url:"/findPwd/getCheckCode",
  128. });
  129. $("#checkCodeBtn").attr("disabled",true);
  130. var time=59;
  131. var timer=window.setInterval(function () {
  132. $("#checkCodeBtn").html("重新获取("+time+"s)");
  133. time--;
  134. if(time==-1){
  135. $("#checkCodeBtn").removeAttr("disabled");
  136. $("#checkCodeBtn").html("获取验证码");
  137. time=59;
  138. window.clearInterval(timer);
  139. }
  140. },1000);
  141. }
  142. </script>
  143. </body>
  144. </html>