javaweb作业:写登录和注册的页面(都不需要接入MySQL,注册页面大家看情况而定),要求代码必须有JavaScript代码进行校验,以及两次密码不一致校验(验证都可以使用alert弹窗校验),登录页面外加一个注册页面,正确登录后跳转页面展示账户密码
时间: 2024-09-28 16:17:14 浏览: 55
JavaWeb登录注册页面
为了帮助你完成这个JavaWeb作业,我会提供一个基本的框架,包括登录和注册页面的设计思路。由于这里不需要连接MySQL数据库,所以我们将使用简单的HTML、CSS和JavaScript来处理前端交互。
**登录页面(index.jsp)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<script src="js/login.js"></script> <!-- 引入JavaScript文件 -->
</head>
<body>
<form id="loginForm">
<input type="text" id="username" placeholder="Username" required>
<br>
<input type="password" id="password" placeholder="Password" required>
<br>
<button onclick="validateLogin()">Login</button>
</form>
<script>
function validateLogin() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 检查用户名和密码长度,也可以添加邮箱校验等
if (username.trim().length === 0 || password.trim().length === 0) {
alert("Please fill in both username and password.");
} else if (document.getElementById('passwordConfirm').value !== password) { // 验证两次密码是否一致
alert("Passwords do not match.");
} else {
// 登录成功,可以跳转到另一个页面(如success.html)
window.location.href = "success.html";
}
}
</script>
</body>
</html>
```
**注册页面(registration.jsp)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration</title>
<script src="js/registration.js"></script> <!-- 引入JavaScript文件 -->
</head>
<body>
<form id="registerForm">
<input type="text" id="email" placeholder="Email" required>
<input type="password" id="password1" placeholder="Password" required>
<input type="password" id="password2" placeholder="Confirm Password" required>
<button onclick="validateRegistration()">Register</button>
</form>
<script>
function validateRegistration() {
// 类似于登录页面的校验,包括两次密码是否一致
// 如果验证通过,保存数据并跳转到注册成功页面
}
</script>
</body>
</html>
```
**JavaScript文件部分**
你需要创建两个单独的JavaScript文件(例如`login.js`和`registration.js`)来包含相应的校验函数。在这个框架下,你可以根据需求扩展校验规则,并处理注册数据的暂存。
注意:以上代码只是一个基础示例,实际项目中应将HTML、CSS和JavaScript分离,使用服务器端技术(如Servlet或Spring MVC)来处理表单提交和安全性问题,而不是直接在客户端进行敏感信息的存储。
阅读全文