当前位置：首页 > news >正文

html实现登录与注册功能案例（不写死且只使用js）

news 来源：原创 2025/6/20 14:15:39

案例需求

实现思路

代码参考

运行效果

升级思路

案例需求

需要一个登录界面和注册页面实现一个较为完整的登录注册功能

1.登录界面没有登录限制需求（降低难度），实现基本的登录判断需求，弹窗出现登录失败和登录成功就行了

2.当点击登录界面里面的注册按钮，跳转到注册页面

3.注册页点击注册，弹窗出现注册成功并跳转回登录页面就行了，不做账户重复注册等其他判断（降低难度）

实现思路

界面就很简单，两个界面都用<input>实现用户名和密码的输入框，登录界面之比注册页面多一个登录按钮。

在登录界面点击登录按钮触发事件判断实现账户密码判断。

点击注册按钮，绑定事件，使用window.location.href 方法绑定跳转页面，实现页面跳转。

在注册页面需要使用sessionStorage.setItem（）来传递数据

登录界面需要使用sessionStorage.getItem（）来接受注册界面传递过来的数据

代码参考

用户名:<input type="text" id="username">
密码:<input type="password" id="password">
<button onclick="login()">登录</button>
<button onclick="register()">注册</button>
<script>const username01 = sessionStorage.getItem("username");const password01 = sessionStorage.getItem("password");function login() {let username = document.getElementById("username").value;let password = document.getElementById("password").value;if (username === username01 && password === password01) {alert("登录成功");}else {alert("登录失败");}}function register() {window.location.href = "zhuce.html";}
</script>

register.html

<div>欢迎来到注册页面</div>
<div>用户名:<input type="text" id="username"></div>
<div>密码:<input type="password" id="password"></div>
<div><button onclick="register()">注册</button></div>
<script>let map = new Map();function register() {let username = document.getElementById("username").value;let password = document.getElementById("password").value;if (username!=null && password!=null){map.set("username",username);map.set("password",password);// console.log(map.get("username"));// console.log(map.get("password"));sessionStorage.setItem("username",map.get("username"));sessionStorage.setItem("password",map.get("password"));window.location.href = "login.html";alert("注册成功")}else{alert("请填写用户名和密码")}}</script>