register.html 6.0 KB

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