用servlet進行用戶名和密碼校驗

時間 2019-12-13

原文原文鏈接

1.封面：javascript

代碼：css

htmlhtml

<!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：java

@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：url

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;
            }

文件連接：spa

連接：https://pan.baidu.com/s/1RxfYuu9HwfPW2RqtiTl_bw
提取碼：tfkr code