用servlet进行用户名和密码校验
1.封面：
代码：
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>登录界面</title> <script type="text/javascript" src="script/login.js"></script> <link href="css/login.css" type="text/css" rel="stylesheet"> </head> <body> <div id="page"> <div id="page_head"> <div id="logo"> <img src="rsc\login_logo.png"/> </div> </div> <div id="page_body"> <div id="login"> <div id="loginTitle"> <b>账号登录</b> </div> <form action="TestServlet" id="loginForm"> <div id="tip">请填写用户名</div> <div class="textitem_count"> <input style="width:320px;height:30px" name="input_user" type="text" placeholder="用户名"> </div> <div class="textitem_pwd"> <input style="width:320px;height:30px" name="input_password" type="password" placeholder="密码"> </div> <div style="position:absolute;left:30px;top:220px;width:320px"> <sqan style="color:red;float:left;">学生选择@stu.swpu.edu.cn</sqan> <a href="#" style="float:right;">忘记密码</a> </div> <div style="position: absolute; left:30px; top:260px;width: 320px"> <input onclick="fnLogin()" style="float:right;background:url(rsc/login_btn.jpg);" class="btn" type="submit" value="登 录" /> </div> </form> </div> </div> <div id="page_foot">西南石油大学</div> </div> </body> </html>
css：
@CHARSET "UTF-8"; #page{ background-color:white; width:1024px;height:600px; border:1px; margin:auto;<!--设置页面居中--> } #page_head{ background-color:#f5f5f5; height:60px; } #page_body{ background-color:yellow; height:460px; width:964px; background:url(../rsc/login_bg_02.jpg) ; margin:auto; } #page_foot{ background-color:blue; height:80px } #logo{ margin-left:100px; } #login{ margin-top:60px; margin-left:550px;<!--外边距的左间距为60px--> width:380px;height:350px; position:absolute; background-color:white; } #loginTitle{ width:380px;height:40px; padding-top:10px; text-align:center; background-color:orange; color:#fff; font-size:16px; } #tip{ display:none;<!--将该DIV隐藏，只有用户名为空显示--> width:380px;height:50px; background-color:#cc3300; color:white; text-align:center; line-height:50px;<!--那么这个元素的实际高度将取决于其中内容的多少而不是固定内容的高度--> } #page_foot{ background-color:#f5f5f5; height:70px;width:964px; margin:auto; padding-top:20px; text-align:center; } .textitem_count{ position:absolute;<!--这里使用绝对定位，因为提示性的div tip是隐藏的，当前显示出来会破坏相对位置--> height:40px; left:30px; top:100px; } .textitem_pwd{ position:absolute;<!--这里使用绝对定位，因为提示性的div tip是隐藏的，当前显示出来会破坏相对位置--> height:40px; left:30px; top:160px; } .btn{ height:38px;width:100px; border:none; color:#fff; font-weight:400; font-size:20px; font-family:"微软雅黑"; }
js：
function fnLogin() { var uname=document.getElementById("input_user") var password=document.getElementById("input_password") if(uname.value.length==0) { document.getElementById("tip").style.display = "block" return false; } else if(uname.value=="tom"&&password.value==123) { return true; //window.location="http://mail.swpu.edu.cn/"; } return false; }
文件链接：
链接：https://pan.baidu.com/s/1RxfYuu9HwfPW2RqtiTl_bw
提取码：tfkr
