forget_password_mobile.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. <!DOCTYPE html>
  2. <html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
  3. xmlns:th="http://www.thymeleaf.org">
  4. <head>
  5. <meta charset="UTF-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <title></title>
  8. <meta name="keywords" content="" />
  9. <meta name="description" content="" />
  10. <link rel="stylesheet" type="text/css" th:href="@{/vendor/bootstrap/css/bootstrap.min.css}">
  11. <link rel="stylesheet" type="text/css" th:href="@{/fonts/font-awesome-4.7.0/css/font-awesome.min.css}">
  12. <link rel="stylesheet" type="text/css" th:href="@{/fonts/iconic/css/material-design-iconic-font.min.css}">
  13. <link rel="stylesheet" type="text/css" th:href="@{/css/util.css}">
  14. <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
  15. </head>
  16. <body>
  17. <div class="limiter">
  18. <div class="container-login100" th:style="'background-image:url(/images/bg.jpg);'">
  19. <div class="wrap-login100 p-l-40 p-r-40 p-t-30 p-b-25">
  20. <form id="byMobile" th:action="@{/page/forgetPassword/check/mobile}" method="post" class="login100-form">
  21. <div style="text-align: center;" class="p-b-15">
  22. <img style="width: 80px;" class="logoImage">
  23. </div>
  24. <span class="login100-form-title p-b-30">找回密码</span>
  25. <div class="wrap-input100 validate-input m-b-23" data-validate="请输入手机号">
  26. <span class="label-input100">手机号</span>
  27. <input id="mobile" class="input100" type="text" name="mobile" placeholder="请输入手机号" required="手机号不可为空">
  28. <span class="focus-input100" data-symbol="&#xf2c8;"></span>
  29. </div>
  30. <div class="wrap-input100 validate-input" data-validate="请输入验证码">
  31. <span class="label-input100">验证码</span>
  32. <input class="input100" type="text" name="verifyCode" placeholder="请输入验证码" required="验证码不可为空">
  33. <span class="focus-input100" data-symbol="&#xf190;"></span>
  34. </div>
  35. <div p-t-8 p-b-20>
  36. <div class="text-right">
  37. <a href="/page/forgetPassword/email">邮箱找回</a>
  38. </div>
  39. </div>
  40. <div class="text-center p-t-6 p-b-8">
  41. <span id="m_info" style="color: red" th:text="${result==null}?'&nbsp;':${result.msg}"></span>
  42. </div>
  43. <div class="container-login100-form-btn" style="width: 50%; float: left;">
  44. <div class="wrap-login100-form-btn">
  45. <div class="login100-form-bgbtn"></div>
  46. <button type="button" id="sendVerify" class="login100-form-btn" onclick="sendMobileVerifyCode(this)" >获取验证码</button>
  47. </div>
  48. </div>
  49. <div class="container-login100-form-btn">
  50. <div class="wrap-login100-form-btn">
  51. <div class="login100-form-bgbtn"></div>
  52. <button type="submit" form="byMobile" class="login100-form-btn">验 证</button>
  53. </div>
  54. </div>
  55. <div class="flex-col-c p-t-10">
  56. <a href="/page/login" class="txt2">返回登录</a>
  57. </div>
  58. </form>
  59. </div>
  60. </div>
  61. </div>
  62. <script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
  63. <script th:src="@{/js/main.js}"></script>
  64. <script th:src="@{/js/common-only.js}"></script>
  65. <script type="text/javascript">
  66. function sendMobileVerifyCode(obj) {
  67. var mobile = $("#mobile").val();
  68. if (mobile == null || mobile.trim() == "") {
  69. document.getElementById("m_info").innerText = "手机号不能为空";
  70. return;
  71. }
  72. if (!mobile.match(/^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/)){
  73. document.getElementById("m_info").innerText = "手机号格式不正确,请重新输入";
  74. return
  75. }
  76. var data = {"mobile":mobile};
  77. $.ajax({
  78. url:"/api/verify/mobile",
  79. type:"PUT",
  80. data:data,
  81. timeout: 3000,
  82. success:function (result) {
  83. console.log(result);
  84. if (result.status != 2000) {
  85. alert("发送失败, 原因:"+result.msg);
  86. document.getElementById("m_info").innerText = result.msg;
  87. }else{
  88. alert("发送成功,请尽快查收!");
  89. document.getElementById("m_info").innerHTML = "&nbsp;";
  90. settime(obj);
  91. }
  92. }
  93. })
  94. }
  95. </script>
  96. </body>
  97. </html>