写一个登录注册的代码用js
时间: 2024-02-19 15:02:37 浏览: 16
以下是一个简单的登录注册代码,使用HTML、CSS和JavaScript实现:
HTML代码:
```
<form id="login-form">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
<form id="register-form">
<h2>Register</h2>
<label for="new-username">Username:</label>
<input type="text" id="new-username" name="new-username" required>
<br>
<label for="new-password">Password:</label>
<input type="password" id="new-password" name="new-password" required>
<br>
<button type="submit">Register</button>
</form>
```
CSS代码:
```
form {
border: 1px solid black;
padding: 10px;
margin: 10px;
width: 300px;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], input[type="password"] {
margin-top: 5px;
padding: 5px;
width: 100%;
}
button {
margin-top: 10px;
padding: 5px;
width: 100%;
}
```
JavaScript代码:
```
// 获取表单元素
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
// 登录表单提交事件
loginForm.addEventListener("submit", (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const username = loginForm.username.value;
const password = loginForm.password.value;
// TODO: 调用登录API验证用户名和密码
console.log(`Login with username: ${username} and password: ${password}`);
});
// 注册表单提交事件
registerForm.addEventListener("submit", (event) => {
event.preventDefault(); // 阻止表单默认提交行为
const username = registerForm["new-username"].value;
const password = registerForm["new-password"].value;
// TODO: 调用注册API创建新用户
console.log(`Register with username: ${username} and password: ${password}`);
});
```
以上代码只是一个简单的示例,实际应用中需要根据具体情况进行更详细的验证和错误处理。