- 判断用户名和密码是否为空如果其一为空则跳出错误提示，要求重新输入用户名密码。
- 创建两个jsp文件，一个为登陆成功页面，一个为失败页面，文件名自拟。在上一步空值判断完毕后，判断用户名和密码是否为同学名字的全拼，如果是跳转到成功页面，否则跳转至失败页面(比如：失败页面可以使用include指令加入登陆的页面)
- 登陆页面：
-
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>登陆页面</title> <style> #bg{ width: 50%; height: 50%; top:50%; left:70%; position: fixed; background-size:60%; } </style> <script type="text/javascript"> function check(){ var a=document.getElementById("用户名").value; var b=document.getElementById("密码").value; var c=document.getElementById("用户名").value; var d=document.getElementById("密码").value; if(a!=c) alert("用户名错误!"); else if(b!=d) alert("密码错误!"); else alert("欢迎进入绵羊村!") } </script> </head> <body> <div id="top"><span style="color:red">${errors}</span></div> <form id="login" action="/servlet/LoginServlet" method="post"> 用户名:<input type="text" name="user" id="user" /><br> 密 码:<input type="password" name="pwd" id="pwd" /><br> <!-- 验证码(点击图片更换验证码):<br>--> <!-- <input name="check" type="text" id="check" maxlength="4" class="check_input" /><br>--> <input type="submit" value="确定"> <input type="reset" value="重置"> </form> </body> </html>
欢迎页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录界面</title>
<style>
#bg{
width:30%;
height:25%;
top:30%;
left:60%;
position:fixed;
background-image:url('https://b-ssl.duitang.com/uploads/item/201406/28/20140628134651_sWicV.jpeg');
background-size:60%;
}
</style>
<script type="text/javascript" >
function check() {
var a=document.getElementById('username').value;
var b=document.getElementById('password').value;
var c=document.getElementById('Username').value;
var d=document.getElementById('Password').value;
if(a!=c)
alert("error");
else if(b!=d)
alert("error");
else alert("Welcome!");
}
</script>
</head>
<body>
<div id="bg">
<form>
<table width="100%">
<tr>
<td style="text-align:right" height:"100px">
<p>name:</p></td>
<td><input type="text" id="username">
<input type="hidden" id="Username" value="123456"></td>
</tr>
<tr>
<td style="text-align:right">
<p>password:</p></td>
<td><input type="password" id="password">
<input type="hidden" id="Password" value="123456"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="loading" onclick='check()'></td>
</tr>
</table>
</form>
</div>
</body>
</html>
1536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
