login.html 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Layui</title>
  6. <meta name="renderer" content="webkit">
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  8. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  9. <link rel="stylesheet" href="layui/css/layui.css" media="all">
  10. <link rel="stylesheet" href="css/index.css" media="all">
  11. </head>
  12. <body>
  13. <div class="main">
  14. <form class="layui-form" action="" lay-filter="login">
  15. <div class="layui-form-item">
  16. <label class="layui-form-label">用户名</label>
  17. <div class="layui-input-block">
  18. <input type="text" name="username" lay-verify="username" autocomplete="off" placeholder="请输入用户名"
  19. class="layui-input">
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label">密码</label>
  24. <div class="layui-input-block">
  25. <input type="password" name="password" lay-verify="password" lay-reqtext="请输入密码" placeholder="请输入密码"
  26. autocomplete="off" class="layui-input">
  27. </div>
  28. </div>
  29. <div class="layui-form-item">
  30. <div class="layui-input-block">
  31. <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">登录</button>
  32. </div>
  33. </div>
  34. </form>
  35. </div>
  36. <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
  37. <script src="layui/layui.js" charset="utf-8"></script>
  38. <script src="js/api.js" charset="utf-8"></script>
  39. <!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
  40. <script>
  41. layui.use(['form','laytpl'], function () {
  42. var form = layui.form
  43. var layer = layui.layer
  44. var laytpl = layui.laytpl
  45. //自定义验证规则
  46. form.verify({
  47. username: function (value) {
  48. console.log(value)
  49. if (value.length < 1) {
  50. return '请输入用户名!';
  51. }
  52. }
  53. , password: [
  54. /^[\S]{6,12}$/
  55. , '密码必须6到12位,且不能出现空格!'
  56. ]
  57. });
  58. //监听提交
  59. form.on('submit(login)', function (data) {
  60. var data = form.val("login")
  61. LayuiPostJson({
  62. url: LOGINAPI,
  63. data: data
  64. }).then(res => {
  65. localStorage.setItem("token",res.access_token)
  66. window.location.href = "index.html"
  67. }).catch(err => {
  68. layer.msg("账号或密码错误!")
  69. })
  70. return false;
  71. });
  72. });
  73. </script>
  74. </body>
  75. </html>