用bootstrap4和jq,写一个登录页面,不需要调用接口,前端校验,生成随机token,设置过期时间1个小时,在首页进行监听

好的，下面是一个简单的登录页面的代码，使用了 Bootstrap 4 和 jQuery，包括前端校验、生成随机 token、设置过期时间等功能。 HTML 代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Login Page</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row justify-content-center mt-5"> <div class="col-md-6"> <div class="card"> <div class="card-header text-center"> <h4>Login</h4> </div> <div class="card-body"> <form id="login-form"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary btn-block">Login</button> </form> </div> </div> </div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script> $(function() { // 表单提交事件 $('#login-form').submit(function(event) { event.preventDefault(); // 阻止默认表单提交行为 // 前端校验用户名和密码是否为空 var username = $('#username').val(); var password = $('#password').val(); if (!username || !password) { alert('Username and password are required'); return; } // 生成随机 token var token = Math.random().toString(36).substr(2); var expireTime = new Date().getTime() + 60 * 60 * 1000; // 设置过期时间为 1 小时后 // 将 token 和过期时间保存到 localStorage 中 localStorage.setItem('token', token); localStorage.setItem('expireTime', expireTime); // 跳转到首页 window.location.href = 'index.html'; }); // 在首页进行监听 var token = localStorage.getItem('token'); var expireTime = localStorage.getItem('expireTime'); if (token && expireTime && new Date().getTime() < expireTime) { // token 有效，可以访问首页 console.log('Token is valid'); } else { // token 已过期或不存在，跳转回登录页 console.log('Token is invalid'); localStorage.removeItem('token'); localStorage.removeItem('expireTime'); window.location.href = 'login.html'; } }); </script> </body> </html> ``` 在这个页面中，我们使用了 Bootstrap 4 的样式来美化界面，使用了 jQuery 来实现前端校验和监听功能。在表单提交时，我们先进行了简单的前端校验，判断用户名和密码是否为空，如果为空则弹出提示框。然后，我们生成了一个随机的 token，并将其和过期时间（一小时后）保存到了 localStorage 中。最后，我们跳转到了首页（假设首页为 `index.html`）。在首页中，我们进行了监听，判断 localStorage 中保存的 token 是否有效。如果有效，则可以访问首页；如果无效，则跳转回登录页（假设登录页为 `login.html`）。注意，这个代码中的 token 是非常简单的随机字符串，实际应用中应该使用更为复杂且安全的 token。此外，这个代码中的 token 和过期时间都保存在了 localStorage 中，实际应用中可能需要使用更加安全的方式来保存这些信息。

CSDN会员

开通CSDN年卡参与万元壕礼抽奖

海量 VIP免费资源千本正版电子书商城会员专享价千门课程&专栏

全年可省5,000元立即开通

用bootstrap4和jq,写一个登录页面,不需要调用接口,前端校验,生成随机token,设置过期时间1个小时,在首页进行监听

最新推荐

Bootstrap实现登录校验表单(带验证码)

使用BootStrap实现用户登录界面UI

zigbee-cluster-library-specification

管理建模和仿真的文件

MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析

用Spring boot和vue写一个登录注册界面

JSBSim Reference Manual

"互动学习：行动中的多样性与论文攻读经历"

MATLAB柱状图在数据分析中的作用：从可视化到洞察

命名ACL和拓展ACL标准ACL的具体区别