用户登录（核验输入是否正确）

迷南。 2023-09-29 10:28 6阅读 0赞

<!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 rel="stylesheet" type="text/css" href="css/common.css">
        <link rel="stylesheet" type="text/css" href="css/login.css">
        
        
        
          
    
    	
    	<script src="js/jquery-3.3.1.js"></script>
    	<script>
    		function checkUsername(){
        
    			var username = $("#username").val();
    			var reg_username=/^\w{
        8,20}$/;
    			var flag = reg_username.test(username);
    			if (flag){
        
    				$("#username").css("border","");
    
    			}else {
        
    				$("#username").css("border","1px solid red");
    			}
    			return flag;
    		}
    		//核验密码
    		function checkPassword(){
        
    			var password = $("#password").val();
    			var reg_password=/^\w{
        8,20}$/;
    			var flag = reg_password.test(password);
    			if (flag){
        
    				$("#password").css("border","");
    
    			}else {
        
    				$("#password").css("border","1px solid red");
    			}
    			return flag;
    		}
    		//核验验证码
    		function checkCheck() {
        
    			var check = $("#check").val();
    			var reg_check=/^\S+$/;
    			var flag = reg_check.test(check);
    			if (flag) {
        
    				$("#check").css("border", "");
    			} else {
        
    				$("#check").css("border", "1px solid red");
    
    			}
    			return flag;
    		}
    
    		$(function (){
        
    			$("#username").blur(checkUsername);
    			$("#password").blur(checkPassword);
    			$("#check").blur(checkCheck);
    			// $("#btn_sub").click(function (){
        
    			// 	if (checkUsername() && checkPassword() && checkCheck()){
        
    			// 		$.post("loginServlet",$("#loginForm").serialize(),function (data){
        
    			// 			if (data.flag){
        
    			// 				//登录成功跳转页面
    			// 				location.href="index.html";
    			//
    			// 			}else {
        
    			// 				$("#errorMsg").html(data.errorMsg);
    			//
    			// 			}
    			// 		})
    			//
    			// 	}
    			// });
    			$("#loginForm").submit(function (){
        
    				if (checkUsername() && checkPassword() && checkCheck()){
        
    					$.post("loginServlet",$(this).serialize(),function (data){
        
    						if (data.flag){
        
    							//登录成功跳转页面
    							location.href="index.html";
    
    						}else {
        
    							$("#errorMsg").html(data.errorMsg);
    
    						}
    					})
    
    				}
    				return false;
    			});
    		});
    	</script>
    </head>
    
    <body>
    
    <div id="header"></div>
        
        <section id="login_wrap">
            <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;">
            	
            </div>
            <div class="login-box">
            	<div class="title">
            		<img src="images/login_logo.png" alt="">
            		<span>欢迎登录黑马旅游账户</span>
            	</div>
            	<div class="login_inner">
    				
    				
            		<div id="errorMsg" class="alert alert-danger" ></div>
    				<form id="loginForm" action="" method="post" accept-charset="utf-8">
            			<input type="hidden" name="action" value="login"/>
    					<input name="username" id="username" type="text" placeholder="请输入账号" autocomplete="off">
            			<input name="password" id="password" type="text" placeholder="请输入密码" autocomplete="off">
            			<div class="verify">
    					<input name="check" id="check" type="text" placeholder="请输入验证码" autocomplete="off">
    					<span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
    					<script type="text/javascript">
    						//图片点击事件
    						function changeCheckCode(img) {
        
    							img.src="checkCode?"+new Date().getTime();
    						}
    					</script>
    			</div>
    			<div class="submit_btn">
    
    						<input type="submit" class="submit" value="登录">
    
    
            				<div class="auto_login">
            					<input type="checkbox" name="" class="checkbox">
            					<span>自动登录</span>
            				</div>        				
            			</div>        			       		
            		</form>
            		<div class="reg">没有账户？<a href="javascript:;">立即注册</a></div>
            	</div>
            </div>
        </section>
        
        <div id="footer"></div>
        
        <script src="js/jquery-1.11.0.min.js"></script>
        
        <script src="js/bootstrap.min.js"></script>
        
        <script type="text/javascript" src="js/include.js"></script>
    </body>
    
    </html>