jsp多終端自適應登入頁面，提交驗證無重新整理

阿新 • • 發佈：2019-02-04

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>密聊</title>
    	<link href="${pageContext.request.contextPath}/assets/iconFont/iconfont.css?v=0001" rel="stylesheet" />
	<style>
		/*登陸*/
input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } 
.login-bg{background-color:#696969;background-repeat: no-repeat; background-attachment: fixed; background-position:top; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; }
.divTopFirst {width: 100%; display: block; text-align: center; margin-left: auto; margin-right: auto; margin-top: 8%; font-size: 22px; color: #cfcfd3; font-weight: 700;}
.divTopFirst img{display: block; margin: 0 auto;}
.divTopSecond {width: 100%; display: block; text-align: center; margin-left: auto;margin-right: auto; margin-top: 90px;}
.loginBox{width: 402px; height: 405px; background-color: rgba(255,255,255,0.28);margin: 0 auto; border-radius: 10px;}
.login-input{font-size: 16px; width: 281px; margin: 0 auto; padding-top: 97px;}
.login-group{font-size: 16px; width: 100%; height: 43px; position: relative; background: #fff;  margin: 0px auto 17px auto;}
.login-group-addon {position: absolute; top: 0; left: 0; display: inline-block; padding-left: 12px; padding-right: 10px;z-index: 99; 
	border: none; background: transparent; outline: none; line-height: 45px; font-size: 22px!important; color:#ccc;}
.login-group-username {float:left; width: 115px; display: inline-block; padding: 0 116px 0 50px; border: none; background: transparent; outline: none; line-height: 43px; font-size: 16px; color: #696969;}
.login-group-postfix{position: absolute; top: 0; right: 0; width: 99px; display: inline-block; padding-left: 10px; padding-right: 10px;z-index: 99; 
	border: none; background: #f3f3f3; line-height: 43px; font-size: 14px!important; color:#696969;}
.login-group-pwd {float:left; width: 219px; display: inline-block; padding: 0 12px 0 50px; border: none; background: transparent; outline: none; line-height: 43px; font-size: 16px; color: #696969;}
.login-group-code {font-size: 16px; width: 100%; height: 43px; position: relative; background: transparent;  margin: 0px auto 17px auto;}
.login-group-code-write{float:left; width: 135px; display: inline-block; padding: 0 11px 0 11px; border: none; background: #fff; outline: none; line-height: 43px; font-size: 16px; color: #696969;}
.login-group-code-read{float:right; width: 95px; display: inline-block; padding: 0 10px 0 10px; border: none; background: url(../images/login/code_bg.png); outline: none; line-height: 43px; font-size: 16px; color: #2d2d2d; text-align: center;cursor: pointer;}
.login-btn{font-size: 16px; width: 100%; height: 43px;background: #5cd1df; color:#fff;border: none;outline: none; margin: 0px auto 17px auto; cursor: pointer;}
.login-notify{width: 100%; color: #f74e53; text-align: center; margin: 0px auto 17px auto;}
@media (max-width: 406px) {
	.loginBox{width: 94%;min-width: 281px;}
}
	</style>
    </head>
    <body class="login-bg">
		<div class="divTopFirst">
			<img src="images/login/logo.png">
			CHAT
		</div>
		<div class="divTopSecond">
			<form class="loginBox" onsubmit="return loginCheck()">
				<div class="login-input">
				    <div class="login-group">
						<div class="login-group-addon iconfont icon-yonghurenxiang-copy"></div>
					    <input type="text" class="login-group-username" id="uName" autocomplete="off">
					    <div class="login-group-postfix">@im.test1.com</div>
				    </div>
				    <div class="login-group">
					    <div class="login-group-addon iconfont icon-mima"></div>
					    <input type="password" class="login-group-pwd" id="uPwd" autocomplete="off">
				    </div>
				    <div class="login-group-code">
				    	<input type="text" class="login-group-code-write" id="code" autocomplete="off" placeholder="驗證碼"/>
				    	<input type="text" class="login-group-code-read" id="code" autocomplete="off" readonly="readonly" value="3wyz"/>
				    </div>
				    <button class="login-btn" type="submit">登入</button>
				    <div class="login-notify" id="loginNote"></div>
				</div>
			</form>
		</div>
		
 	</body>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.2.4.js" ></script>
 	<script type="text/javascript" src="${pageContext.request.contextPath}/js/login.js" ></script>
 	<script>
 		$(document).ready(function(){ 
			bgSwitch();
		});

		//登陸頁面背景輪換淡出登入
function bgSwitch(){
var randomNum =  parseInt(3*Math.random());
if(randomNum<=0){
    $('body').css('background-image','url(images/login/bg1.jpg)');
}else{
    var bgimg = "url(images/login/bg"+randomNum+".jpg)";
    $('body').css('background-image',bgimg);
    //$('body').css('background-image',bgimg).fadeTo('slow', 1); 
}
}


//登陸驗證
//登陸驗證
function loginCheck(){
$("#loginNote").html("");
var uName = $("#uName").val();
var uPwd = $("#uPwd").val();
    var ExName = /^(?![0-9])[a-zA-Z0-9_]{3,30}$/; //3-30位字母數字下劃線非數字開頭的使用者名稱
    var ExPwd = /^[ 
[email protected]#$%&*]{6,20}$/;    //長度在6位到20位（包含）之間，包括英文字母（區分大小寫）、數字和符號（!、@、#、$、%、&、*）
    var objExpName = new RegExp(ExName);          //建立正則表示式物件
    var objExpPwd = new RegExp(ExPwd);          //建立正則表示式物件
    var flag = 1;
    if(uName == ""){
    $("#loginNote").html("帳號不可為空。");
    flag = 0;
    }else{
    if(objExpName.test(uName)==true){                   //通過正則表示式驗證
        //alert(uName);
    flag = 1;
    }else{
        $("#loginNote").html("帳號格式不正確，請重新輸入。");
        flag = 0;
    }
    }
    
    if(uPwd == ""){
    $("#loginNote").html("密碼不可為空。");
     flag = 0;
    }else{
    if(objExpPwd.test(uPwd)==true){                   //通過正則表示式驗證
        //alert(uPwd);
    flag = 1;
    }else{
        $("#loginNote").html("密碼只能包含英文字母、數字和符號（!、@、#、$、%、&、*）。");
        flag = 0;
    }
    }


    if(flag == 0)
    {
    return false;  
    }  
    return true;  
    
} 

 	</script>
</html>

jsp多終端自適應登入頁面，提交驗證無重新整理

<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head>

關於如何用rem相容不同手機螢幕大小不一致問題以達到多終端自適應問題

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="i

wordpress多終端自適應

N久前就有準備說要做一款屬於自己的主題，奈何諸多瑣事，說多底都是自己太懶，以致一直未能如願，嚴重鄙視下自己。好吧，這不也是有段時間沒更新了嘛，就乾脆直接在原主題的基礎上加入了傳說中的多終端自適應瀏覽。什麼？多終端是什麼概念？親，不用理這個概念了，解釋理

[Spring Security] 表單登入通過配置自定義登入頁面，以及自定義認證成功/失敗處理機制

1.目錄結構2.配置自定義登入頁通過配置SecurityProperties,MyProperties,SecurityCoreConfig來讀取resources資料夾下application.properties中相關配置項。SecurityProperties：pack

SSM框架下登入頁面，圖片驗證碼，密碼加密對比資料庫資料（二）

登入頁面的Controller的程式碼如下：在這過程中，需要對填入資料進行判斷，是否為使用者名稱存在？是否密碼有誤？是否驗證碼有誤？如若都沒有錯誤則頁面跳轉至登入成功頁面。 @RequsetMapper("/login.do") public @Respons

頁面布局的幾種方式（靜態化布局，流式布局，自適應布局，響應式布局，彈性布局）

情況下 sea 手機窗口大小 media sys tps 差異媒體一、靜態布局（static layout）　　即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、布局特點　　不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。常規

idea+maven + spring security +springmvc入門（自定義登入頁面），附idea如何建立web專案

第一次使用idea，上午在eclipse中學習了spring security 入門，下午試試在idea中搭建。剛開始我以為直接將eclipse的檔案 copy過來就行了，結果發現copy過來以後各種報錯。後來把m

總結iframe高度自適應，自適應子頁面高度

var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false; var isFireFox = brow

iframe高度自適應子頁面高度使用onload屬性

sca height init window 屬性 fun frame var scroll <!DOCTYPE html> <html> <head> <title>測試</title> <

jQuery ajax如何傳多個值到後臺頁面，舉例：

account func $.ajax function 相對必須 () ech count 一、js代碼 <script type="text/JavaScript">$("#save_change_<{$aff.Id}>").click

移動端自適應處理頁面布局

dem 全部但是希望去掉常用 boot div 謝謝處理頁面大概會有若幹種方案: 第一種就是使用bootstrap; 自己使用自適應單位常用的rem，em ,及別人封裝好的插件flexble.js; 在使用flexble.js;時發現兩個問題，高度沒有很好的展現

wpf讓圖片自適應容器大小，而且又不會拉昇變形

1 <Grid Grid.Column="3" 2 Margin="0,4,0,0" 3 Background="Black"> 4 <Viewbox> 5

Nodejs：npm run build之後，dist\index.html頁面在火狐中可以正常顯示登入頁面並登入成功，在Chrome中可以正常顯示登入頁面，登入失敗

問題描述：Nodejs：npm run build之後，dist\index.html頁面在火狐中可以正常顯示登入頁面並登入成功，在Chrome中可以正常顯示登入頁面，登入失敗解決方法：將打包後的dist\index.html放到http伺服器上執行就可以登入了。總結：

潭州課堂25班：Ph201805201 django框架第十三課自定義404頁面，auth系統中的User模型，auth系統許可權管理 (課堂筆記)

當 DEBUG=True 時，django 內部的404報錯資訊，自帶的報錯資訊，要自定義404資訊，要先把 DEBUG=False ，之後要自定義4040頁面，有兩種方法，　　方法1，在建立404頁面這樣就配置完成，當訪問不存在的頁面時，跳轉到自定義的4

強大的螢幕適配佈局rem響應式實現一套web程式碼多端自適應適配（實用、贊）

原文出處：https://blog.csdn.net/qq_14997169/article/details/53914201 實現強大的螢幕適配佈局流式的佈局、固定的寬度，還有響應式來做，但是這些方案都不是最佳的解決方法。->->rem rem是什麼？

Spring Boot自定義錯誤頁面，Whitelabel Error Page處理方式

Spring Boot以一種新的微服務的方式來替代以Spring Framework構建專案的傳統方式，我已經計劃在後續的專案開發中使用它。它已經幫我們做了90%的工作，剩下10%的工作需要我們自己去完成。對於我來說，自定義錯誤頁面就是其中之一。比如404錯誤，如果不

SSO之CAS整合自定義登入頁面

前言：一：替換頁面找到CAS服務端中WEB-INF/view/jsp/default/ui/下的casLoginView.jsp頁面，此頁面為CAS預設的登入頁面，將自定義的頁面取名也叫casLoginView.jsp進行頁面替換，替換前先把預設的備份一份。替

網頁中的iframe自適應高度寬度，延遲計算高寬度

//在iframe onlad時執行下面的程式碼 id="myFileTableIframe" function IframeAutoHeightAndWidth(){ var iframe=document.getElementById("myFileTableI

Axure的快捷鍵，及網頁版簡單登入頁面，安卓圖示

複製快捷鍵： ctrl+滑鼠左鍵拖拽 ctrl+D:複製出來的新元件的XY的值各加10PX; ctrl+C,----》貼上ctrl+V 選中兩個框下拉下面一個，兩個就一樣放大右鍵–》組合中間按一

【web】強大的螢幕適配佈局rem響應式實現一套web程式碼多端自適應適配

強大的螢幕適配佈局rem響應式實現一套web程式碼多端自適應適配實現強大的螢幕適配佈局流式的佈局、固定的寬度，還有響應式來做，但是這些方案都不是最佳的解決方法。->->r

jsp多終端自適應登入頁面，提交驗證無重新整理

相關推薦