在jsp页面去拿业务处的数据（账号密码），然后对比验证实现登录注册，失败就弹出一个弹出框提示
可以使用Ajax来实现在JSP页面中获取业务数据（账号密码）并进行验证，如果验证失败，则弹出一个提示框
1、在JSP页面中添加一个表单，用户可以输入用户名和密码：
<form id="loginForm">
<label>Username:</label>
<input type="text" name="username"><br>
<label>Password:</label>
<input type="password" name="password"><br>
<button type="submit">Login</button>
</form>
2、在JSP页面中添加一个JavaScript函数，该函数将使用Ajax从服务器获取业务数据并进行验证：
function login() {
var form = document.getElementById("loginForm");
var username = form.elements["username"].value;
var password = form.elements["password"].value;
// 发送Ajax请求到服务器
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 验证成功，跳转到主页
window.location.href = "home.jsp";
} else {
// 验证失败，弹出提示框
alert("Invalid username or password");
}
}
};
xhr.open("POST", "login.jsp", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password));
}
3、在JSP页面中添加一个JavaScript事件监听器，该事件监听器将在表单提交时调用上述函数：
var form = document.getElementById("loginForm");
form.addEventListener("submit", function(event) {
event.preventDefault(); // 防止表单提交
login();
});
4、在服务器端的login.jsp页面中，您可以从请求参数中获取用户名和密码，并进行验证。如果验证成功，您可以将HTTP状态码设置为200，否则将其设置为401或其他适当的错误码：
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
// 在这里进行验证
if (isValid(username, password)) {
response.setStatus(200); // 验证成功
} else {
response.setStatus(401); // 验证失败
}
%>
解决方案：
首先，为了在jsp页面中获取控制器对象的数据，需要在控制器中将数据传递给jsp页面。可以使用ModelAndView对象将数据传递给jsp页面，并在jsp页面中使用EL表达式获取数据。
例如，在控制器中添加如下代码：
@RequestMapping("/login")
public ModelAndView login(String username, String password) {
// 处理登录逻辑
// 如果验证失败，将错误信息放到model中
ModelAndView mav = new ModelAndView();
if (验证失败) {
mav.addObject("errorMsg", "用户名或密码错误");
}
mav.addObject("username", username);
mav.setViewName("login"); // 视图名称为login.jsp
return mav;
}
在jsp页面中使用EL表达式获取数据，并使用JavaScript弹出框提示错误信息：
<form action="/login" method="post">
用户名：<input type="text" name="username" value="${username}"><br>
密码：<input type="password" name="password"><br>
<input type="submit" value="登录">
</form>
<script>
var errorMsg = "${errorMsg}";
if (errorMsg) {
alert(errorMsg);
}
</script>
其次，为了实现登录和注册的验证功能，可以使用表单验证框架，例如jQuery Validate。在JSP页面中添加表单和验证规则，例如：
<form action="/register" method="post" id="registerForm">
用户名：<input type="text" name="username"><br>
密码：<input type="password" name="password"><br>
确认密码：<input type="password" name="confirmPassword"><br>
<input type="submit" value="注册">
</form>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script>
$("#registerForm").validate({
rules: {
username: {
required: true, // 必填
minlength: 3, // 最少3个字符
maxlength: 20 // 最多20个字符
},
password: {
required: true, // 必填
minlength: 6, // 最少6个字符
maxlength: 20 // 最多20个字符
},
confirmPassword: {
required: true, // 必填
equalTo: "#password" // 与密码一致
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名至少3个字符",
maxlength: "用户名最多20个字符"
},
password: {
required: "请输入密码",
minlength: "密码至少6个字符",
maxlength: "密码最多20个字符"
},
confirmPassword: {
required: "请确认密码",
equalTo: "两次密码输入不一致"
}
},
submitHandler: function(form) {
// 表单验证通过，提交表单
form.submit();
}
});
</script>
最后，如果验证失败，可以使用JavaScript弹出框提示用户相应的错误信息。例如：
submitHandler: function(form) {
// 表单验证通过，提交表单
form.submit();
},
errorPlacement: function(error, element) {
// 其他错误信息，在输入框旁边弹出提示框
error.insertAfter(element);
},
invalidHandler: function(form, validator) {
// 错误提示，弹出alert框
var errors = validator.numberOfInvalids();
var errorMsg = "";
for (var i = 0; i < errors; i++) {
errorMsg += validator.errorList[i].message + "\n";
}
alert(errorMsg);
}