index.jsp 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  2. <html>
  3. <head>
  4. <%@ include file="header.jspf"%>
  5. <script
  6. src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
  7. <script
  8. src="${pageContext.request.contextPath}/js/messages_zh.min.js"></script>
  9. <script
  10. src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
  11. <title>教师质量评估系统</title>
  12. </head>
  13. <body
  14. style="background: url('${pageContext.request.contextPath}/image/adm-login-bg.jpg'); background-size: cover">
  15. <div class="container">
  16. <div>
  17. <h1 class="" style="color: white;font-weight: bold;">
  18. 教师质量评估系统<small style="color: white;">Teaching Quality
  19. Evaluation System</small>
  20. </h1>
  21. </div>
  22. <!--登陆表单 -->
  23. <div class="row" style="margin-top: 180px; ">
  24. <div class="row">
  25. <div class="col-sm-5 col-sm-offset-4">
  26. <div class="panel panel-primary" style="background:white"
  27. data-toggle="tooltip" data-placement="top">
  28. <div class="panel-heading">
  29. <h2 class="panel-title">系统登录</h2>
  30. </div>
  31. <div class="panel-body">
  32. <!--表单 -->
  33. <form action="${pageContext.request.contextPath}/login"
  34. class="form-horizontal" role="form" id="form1" name="form1"
  35. style="margin-top: 20px" method="post">
  36. <div class="form-group" align="center">
  37. <label for="username" class="col-sm-3 control-label">用户名:</label>
  38. <div class="col-sm-6">
  39. <input type="text" class="form-control" id="username" required="required"
  40. name="username" placeholder="请输入学号/教师号/Id">
  41. </div>
  42. </div>
  43. <div class="form-group" align="center">
  44. <label for="password" class="col-sm-3 control-label">密码:</label>
  45. <div class="col-sm-6">
  46. <input type="password" class="form-control" name="password" required="required"
  47. id="password">
  48. </div>
  49. <div class="col-sm-3">
  50. <%--<span style="top: 7px" class="glyphicon glyphicon-question-sign"--%>
  51. <%--aria-hidden="true" data-toggle="tooltip" data-placement="top"--%>
  52. <%--title="初始密码默认为身份证后8位" ></span>--%>
  53. <%--<a href="#" id="init-pwd" class="btn btn-sm btn-default">初始密码?</a>--%>
  54. </div>
  55. </div>
  56. <c:if test="${ not sessionScope.skipVerify }">
  57. <div class="form-group" align="center">
  58. <label for="verificationCode" class="col-sm-3 control-label">验证码</label>
  59. <div class="col-sm-5">
  60. <input type="text" class="form-control" name="verificationCode"
  61. id="verificationCode" required="required">
  62. </div>
  63. <div class="col-sm-3">
  64. <img alt="验证码" class="control-label" id="valif-image"
  65. src="${pageContext.request.contextPath}/valifImage">
  66. </div>
  67. </div>
  68. </c:if>
  69. <div class="form-group">
  70. <div class="col-sm-4 col-sm-offset-2">
  71. <div class="radio">
  72. <label> <input type="radio" name="type" required="required"
  73. value="student" checked="checked"><span>学生登录</span>
  74. </label>
  75. </div>
  76. <div class="radio">
  77. <label> <input type="radio" name="type"
  78. value="teacher" ><span>教师登录</span>
  79. </label>
  80. </div>
  81. <div class="radio">
  82. <label> <input type="radio" name="type"
  83. value="admin"><span>管理员登录</span>
  84. </label>
  85. </div>
  86. <div class="radio">
  87. <label> <input type="radio" name="type"
  88. value="other"><span>其他</span>
  89. </label>
  90. </div>
  91. </div>
  92. <div class="col-sm-6">
  93. <button type="submit" class="btn btn-warning" id="login-btn">学生登录</button>
  94. </div>
  95. </div>
  96. <div class="form-group error-message-container">
  97. <div class="col-sm-8 col-sm-offset-2">
  98. <div class="alert alert-danger alert-dismissible" role="alert">
  99. <button type="button" class="close" data-dismiss="alert">
  100. <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
  101. </button>
  102. <span class="error-message">${error}</span>
  103. </div>
  104. </div>
  105. </div>
  106. </form>
  107. <!--登陆表单 -->
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <!-- container -->
  115. <script type="text/javascript">
  116. $(function() {
  117. $("#form1").validate({
  118. rules : {
  119. username : {
  120. required : true
  121. },
  122. password : {
  123. required : true,
  124. minlength : 3
  125. }
  126. },
  127. messages : {
  128. username : "请输入用户名",
  129. password : {
  130. required : "请输入密码",
  131. minlength : "长度需要大于3"
  132. }
  133. }
  134. });
  135. });
  136. $(function() {
  137. //显示的错误提示框
  138. showErrorMessage();
  139. //根据登录方式显示不同的按钮文字
  140. $("input:radio").click(function(){
  141. var checkedRadio = $("input:radio:checked");
  142. $("#login-btn").html(checkedRadio.next().text());
  143. reFetchValifImage();
  144. });
  145. $("#valif-image").click(function(){
  146. reFetchValifImage();
  147. })
  148. //从cookie中获取用户的登录方式
  149. var loginType = $.cookie("loginType");
  150. if(loginType){
  151. $("input[value='"+loginType+"']").attr("checked","checked");
  152. $("#login-btn").html($("input:radio:checked").next().text());
  153. if(loginType!='teacher' && loginType!='student'){
  154. reFetchValifImage();
  155. }
  156. }
  157. $("#init-pwd").click(function(e){
  158. e.preventDefault();
  159. alert("初始密码默认为身份证后8位\n如果身份证信息不完整,默认为学号\n进入系统后请及时修改密码!");
  160. });
  161. });
  162. $(function () {
  163. $('[data-toggle="tooltip"]').tooltip();
  164. })
  165. function reFetchValifImage(){
  166. var checkedRadio = $("input:radio:checked");
  167. var type = checkedRadio.val();
  168. if(type){
  169. var valifImage = $("#valif-image");
  170. var imageSrc = valifImage.attr('src');
  171. var lastIndex = imageSrc.lastIndexOf('?');
  172. if(lastIndex==-1){
  173. lastIndex = imageSrc.length;
  174. }
  175. imageSrc = imageSrc.substring(0,lastIndex);
  176. // if(type =='student' || type == 'teacher'){
  177. // valifImage.attr('src',imageSrc+"?random="+Math.random());
  178. // }else{
  179. valifImage.attr('src',imageSrc+"?type=inner&random="+Math.random());
  180. // }
  181. }
  182. $("#verificationCode").val('');
  183. }
  184. </script>
  185. </body>
  186. </html>