login.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>后台登录</title>
  7. <link rel="stylesheet" href="../js/layer/theme/default/layer.css">
  8. <link rel="stylesheet" href="../css/common.css">
  9. <link rel="stylesheet" href="../css/login.css">
  10. <link rel="stylesheet" href="../css/iconfont.css">
  11. <!--[if lt IE 9]>
  12. <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  13. <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  14. <![endif]-->
  15. </head>
  16. <body>
  17. <div class="wrapper">
  18. <div class="inner">
  19. <div class="logo"><img src="../img/logo.png" alt=""></div>
  20. <div class="form-box">
  21. <div class="form-item">
  22. <i class="iconfont icon-iconzh1"></i>
  23. <input type="text" class="form-input" name="username" id="username" placeholder="请输入用户名">
  24. </div>
  25. <div class="form-item">
  26. <i class="iconfont icon-mimacopy"></i>
  27. <input type="password" class="form-input" name="pwd" id="pwd" placeholder="请输入密码">
  28. </div>
  29. <div class="form-item code-item">
  30. <i class="iconfont icon-yanzhengma"></i>
  31. <input type="text" class="form-input" name="code" id="code" placeholder="验证码">
  32. <img class="img-code" onclick="changePic()" id="img-code" src="http://htt.55128.cn/Util/VerifyCode?0.49822945461860857" alt="">
  33. </div>
  34. <div class="form-button">
  35. <button id="btn">登录</button>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. <script src="../js/jquery.js"></script>
  41. <script src="../js/layer/layer.js"></script>
  42. <script type="text/javascript">
  43. function changePic() {
  44. $("#img-code").attr("src", "api?time=" + (new Date()).getTime());
  45. }
  46. $("#pwd").focus(function() {
  47. var username = $("#username").val();
  48. if(username == '') {
  49. layer.tips('请先输入用户名',$("#username"));
  50. return;
  51. }
  52. })
  53. $("#code").focus(function() {
  54. var username = $("#username").val();
  55. var pwd = $("#pwd").val();
  56. if(username == '') {
  57. layer.tips('请先输入用户名',$("#username"));
  58. return;
  59. }
  60. if(pwd == '') {
  61. layer.tips('请先输入密码',$("#pwd"));
  62. return;
  63. }
  64. })
  65. $("#btn").on("click",function() {
  66. var username = $.trim($("#username").val());
  67. var pwd = $.trim($("#pwd").val());
  68. var code = $.trim($("#code").val());
  69. var uregs = /^[a-zA-Z0-9]{4,12}$/
  70. var pregs = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
  71. if(!uregs.test(username) || username == ''){
  72. layer.tips('请输入正确的用户名格式',$("#username"));
  73. $("#username").focus();
  74. return;
  75. }
  76. if(!pregs.test(pwd) || pwd == ''){
  77. layer.tips('请输入正确的密码格式',$("#pwd"));
  78. $("#pwd").focus();
  79. return;
  80. }
  81. if(code == '') {
  82. layer.tips('请输入验证码',$("#code"));
  83. $("#code").focus();
  84. return;
  85. }
  86. if(code.length != 4) {
  87. layer.tips('请输入合法的验证码',$("#code"));
  88. $("#code").focus();
  89. return;
  90. }
  91. $.ajax({
  92. type:'post',
  93. url:'',
  94. dataType:'json',
  95. data:{'username':username,'pwd':pwd,'code':code},
  96. success:function(res) {
  97. if(res.code == 0) {
  98. window.location.href = './index.html'
  99. }
  100. }
  101. })
  102. })
  103. </script>
  104. </body>
  105. </html>