js注册页面
时间: 2023-08-06 16:21:24 浏览: 36
好的,下面是一个简单的 JavaScript 注册页面的示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
</head>
<body>
<h1>注册页面</h1>
<form id="registerForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirmPassword">确认密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="注册">
</form>
<div id="message"></div>
<script src="register.js"></script>
</body>
</html>
```
JavaScript 代码(register.js):
```javascript
const form = document.getElementById('registerForm');
const username = document.getElementById('username');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');
const message = document.getElementById('message');
form.addEventListener('submit', (event) => {
event.preventDefault();
// 判断用户名和密码是否为空
if (username.value.trim() === '' || password.value.trim() === '') {
message.innerHTML = '用户名或密码不能为空!';
return;
}
// 判断密码和确认密码是否相同
if (password.value !== confirmPassword.value) {
message.innerHTML = '两次输入的密码不相同!';
return;
}
// 注册成功,显示消息
message.innerHTML = '注册成功!';
});
```
这段代码实现了一个简单的注册页面,当用户提交表单时,会检查用户名和密码是否为空,以及确认密码是否与密码相同,如果检查通过,则显示注册成功的消息,否则显示相应的错误消息。