仅用html和js制作用户注册和登录页面和密码修改页面三个页面转换
时间: 2023-07-16 11:11:45 浏览: 46
好的,以下是一个简单的示例代码:
HTML(注册页面):
```html
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<script src="register.js"></script>
</head>
<body>
<h1>用户注册</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password" required><br>
<button type="submit">注册</button>
</form>
</body>
</html>
```
HTML(登录页面):
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<script src="login.js"></script>
</head>
<body>
<h1>用户登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">登录</button>
</form>
</body>
</html>
```
HTML(密码修改页面):
```html
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<script src="changepassword.js"></script>
</head>
<body>
<h1>修改密码</h1>
<form>
<label for="old-password">旧密码:</label>
<input type="password" id="old-password" name="old-password" required><br>
<label for="new-password">新密码:</label>
<input type="password" id="new-password" name="new-password" required><br>
<label for="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password" required><br>
<button type="submit">确认修改</button>
</form>
</body>
</html>
```
JavaScript(注册页面):
```javascript
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password !== confirmPassword) {
alert('两次输入的密码不一致!');
return;
}
// TODO: 发送注册请求
});
```
JavaScript(登录页面):
```javascript
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// TODO: 发送登录请求
});
```
JavaScript(密码修改页面):
```javascript
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const oldPassword = document.getElementById('old-password').value;
const newPassword = document.getElementById('new-password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (newPassword !== confirmPassword) {
alert('两次输入的密码不一致!');
return;
}
// TODO: 发送密码修改请求
});
```
注意,在示例代码中,TODO 的部分需要根据具体需求进行实现。另外,为了简化示例代码,这里没有考虑数据的安全性和持久性,实际项目中需要进行更完善的处理。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)