实现注册功能 一、 创建如上页面 二、 用户信息存储 1. 获取用户名、密码,并封装成一个对象user var user=new Object(); 2. 创建一个users数组,用于存放所有注册过的用户 var users=new Array(); 3. 将user对象存到users数组中 例如:users[i]=user; 三、 业务逻辑 1. 输入的用户名必须不在users 数组中出现才允许注册,否则给出错误提示 2. 两次密码必须一致,才允许注册,否则给出错误提示 3. 注册成功,也给出相应的提示 4. 允许用户注册多个账户,因此一次注册结束,则所有input框中的值自动清空,以备下次注册
时间: 2023-11-22 21:54:47 浏览: 36
实现注册功能的代码如下:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
</head>
<body>
<h2>注册页面</h2>
<form>
<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="confirm-password">确认密码:</label>
<input type="password" id="confirm-password" name="confirm-password"><br><br>
<button type="button" onclick="register()">注册</button>
<button type="reset">重置</button>
</form>
<p id="message"></p>
<script src="register.js"></script>
</body>
</html>
```
JavaScript代码:
```
var users = [];
function register() {
var username = document.getElementById("username").value.trim();
var password = document.getElementById("password").value.trim();
var confirmPassword = document.getElementById("confirm-password").value.trim();
if (username === "") {
document.getElementById("message").innerHTML = "请输入用户名";
return;
}
if (password === "" || confirmPassword === "") {
document.getElementById("message").innerHTML = "请输入密码和确认密码";
return;
}
if (password !== confirmPassword) {
document.getElementById("message").innerHTML = "两次输入的密码不一致";
return;
}
for (var i = 0; i < users.length; i++) {
if (users[i].username === username) {
document.getElementById("message").innerHTML = "该用户名已被注册";
return;
}
}
var user = {
username: username,
password: password
};
users.push(user);
document.getElementById("message").innerHTML = "注册成功";
document.getElementById("username").value = "";
document.getElementById("password").value = "";
document.getElementById("confirm-password").value = "";
}
```
以上代码实现了注册功能,包括输入用户名、密码和确认密码,检查是否符合要求,如果符合则将用户信息存储到一个数组中,并给出相应的提示。如果不符合要求,则给出错误提示。同时,还实现了重置表单的功能,以便用户可以进行多次注册。