reset_email.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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. <!--邮箱找回-->
  21. <form id="byEmail" th:action="@{/api/user/email}" method="post" class="login100-form">
  22. <div id="login-logo" class="p-b-15" style="text-align: center;">
  23. <img style="width: 80px;" th:src="@{/images/mooctest.png}" >
  24. </div>
  25. <span class="login100-form-title p-b-30">修改邮箱</span>
  26. <div class="wrap-input100 validate-input m-b-23" data-validate="请输入邮箱">
  27. <span class="label-input100">新邮箱</span>
  28. <input id="email" class="input100" type="email" name="email" placeholder="请输入邮箱" required="邮箱不可为空">
  29. <span class="focus-input100" data-symbol="&#xf206;"></span>
  30. </div>
  31. <div class="wrap-input100 validate-input" data-validate="请输入验证码">
  32. <span class="label-input100">验证码</span>
  33. <input id="verifyCode" class="input100" type="text" name="verifyCode" placeholder="请输入验证码" required="验证码不可为空">
  34. <span class="focus-input100" data-symbol="&#xf190;"></span>
  35. </div>
  36. <div class="text-center p-t-6 p-b-8">
  37. <span id="info" style="color: red" th:text="${result==null}?'&nbsp;':${result.msg}"></span>
  38. </div>
  39. <div class="container-login100-form-btn" style="width: 50%; float: left;">
  40. <div class="wrap-login100-form-btn">
  41. <div class="login100-form-bgbtn"></div>
  42. <button type="button" id="sendMobileVerify" class="login100-form-btn" onclick="sendEmailVerifyCode(this)" >获取验证码</button>
  43. </div>
  44. </div>
  45. <div class="container-login100-form-btn">
  46. <div class="wrap-login100-form-btn">
  47. <div class="login100-form-bgbtn"></div>
  48. <button type="button" onclick="updateEmail()" class="login100-form-btn">验 证</button>
  49. </div>
  50. </div>
  51. <div class="flex-col-c p-t-10">
  52. <a href="/page/login" class="txt2">返回登录</a>
  53. </div>
  54. </form>
  55. </form>
  56. </div>
  57. </div>
  58. </div>
  59. <script th:src="@{/vendor/jquery/jquery-3.2.1.min.js}"></script>
  60. <script th:src="@{/js/main.js}"></script>
  61. <script type="text/javascript">
  62. function sendEmailVerifyCode(obj) {
  63. var email = $("#email").val();
  64. if (email == null || email.trim() == "") {
  65. document.getElementById("info").innerText = "邮箱不能为空";
  66. return;
  67. }
  68. if (!email.match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/)){
  69. document.getElementById("info").innerText = "邮箱格式不正确,请重新输入";
  70. return
  71. }
  72. var data = {"email":email};
  73. $.ajax({
  74. url:"/api/verify/mail",
  75. type:"PUT",
  76. data:data,
  77. timeout: 6000,
  78. success:function (result) {
  79. console.log(result);
  80. if (result.status != 2000) {
  81. alert("发送失败, 原因:"+result.msg);
  82. }else{
  83. alert("发送成功,请前往邮箱查收!");
  84. document.getElementById("info").innerHTML = "&nbsp;"
  85. settime(obj);
  86. }
  87. }
  88. })
  89. }
  90. function updateEmail() {
  91. var email = $("#email").val();
  92. var verifyCode = $("#verifyCode").val();
  93. if (email == null || email.trim() == "") {
  94. document.getElementById("info").innerText = "邮箱不能为空";
  95. return;
  96. }
  97. if (!email.match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/)){
  98. document.getElementById("info").innerText = "邮箱格式不正确,请重新输入";
  99. return;
  100. }
  101. if (verifyCode == null || verifyCode.trim()==""){
  102. document.getElementById("info").innerText = "请填写验证码";
  103. return;
  104. }
  105. var data = {"email":email, "verifyCode":verifyCode};
  106. $.ajax({
  107. url:"/api/user/email",
  108. type:"PUT",
  109. data:JSON.stringify(data),
  110. contentType: 'application/json; charset=utf-8',
  111. dataType:"json",
  112. timeout: 3000,
  113. success:function (result) {
  114. console.log(result);
  115. if (result.status != 2000) {
  116. document.getElementById("info").innerText = result.msg;
  117. }else{
  118. document.location.href="/page/operation/success";
  119. }
  120. }
  121. })
  122. }
  123. </script>
  124. </body>
  125. </html>