利用仅用html和js制作用户注册和登录页面和密码修改页面三个页面转换
时间: 2023-07-16 18:12:17 浏览: 100
好的,我可以给您提供一个简单的实现方法。首先,我们需要三个 HTML 文件,分别为 register.html、login.html 和 password.html。然后,我们需要编写一个 JavaScript 文件,用于处理用户的注册、登录和密码修改请求,并根据需要将用户重定向到不同的页面。
下面是一个简单的示例代码,供您参考:
register.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<form>
<label>用户名</label>
<input type="text" name="username" required><br><br>
<label>密码</label>
<input type="password" name="password" required><br><br>
<button type="submit">注册</button>
</form>
<script src="main.js"></script>
</body>
</html>
```
login.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
</head>
<body>
<h1>用户登录</h1>
<form>
<label>用户名</label>
<input type="text" name="username" required><br><br>
<label>密码</label>
<input type="password" name="password" required><br><br>
<button type="submit">登录</button>
</form>
<script src="main.js"></script>
</body>
</html>
```
password.html:
```html
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
</head>
<body>
<h1>修改密码</h1>
<form>
<label>旧密码</label>
<input type="password" name="oldPassword" required><br><br>
<label>新密码</label>
<input type="password" name="newPassword" required><br><br>
<button type="submit">修改密码</button>
</form>
<script src="main.js"></script>
</body>
</html>
```
main.js:
```javascript
// 获取当前页面的文件名
function getCurrentPage() {
var url = window.location.href;
return url.substring(url.lastIndexOf('/') + 1);
}
// 注册表单提交事件
document.forms[0].addEventListener('submit', function(e) {
e.preventDefault();
var username = this.elements['username'].value;
var password = this.elements['password'].value;
// 处理注册请求
// ...
// 注册成功后跳转到登录页面
window.location.href = 'login.html';
});
// 登录表单提交事件
document.forms[0].addEventListener('submit', function(e) {
e.preventDefault();
var username = this.elements['username'].value;
var password = this.elements['password'].value;
// 处理登录请求
// ...
// 登录成功后跳转到用户主页
window.location.href = 'user.html';
});
// 修改密码表单提交事件
document.forms[0].addEventListener('submit', function(e) {
e.preventDefault();
var oldPassword = this.elements['oldPassword'].value;
var newPassword = this.elements['newPassword'].value;
// 处理修改密码请求
// ...
// 修改成功后跳转到用户主页
window.location.href = 'user.html';
});
// 根据当前页面进行初始化
switch (getCurrentPage()) {
case 'register.html':
// 初始化注册页面
// ...
break;
case 'login.html':
// 初始化登录页面
// ...
break;
case 'password.html':
// 初始化修改密码页面
// ...
break;
}
```
以上代码仅供参考,需要根据实际需求进行修改和完善。
阅读全文