jsp多终端自适应登录页面，提交验证无刷新

最新推荐文章于 2023-06-15 10:18:09 发布

小蒜瓣

最新推荐文章于 2023-06-15 10:18:09 发布

阅读量545

点赞数

分类专栏：编码文章标签： login

本文链接：https://blog.csdn.net/messicr7/article/details/76914263

版权

编码专栏收录该内容

44 篇文章 2 订阅

订阅专栏

<%@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" οnsubmit="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 = /^[a-zA-Z0-9!@#$%&*]{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>