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

Major_xx

已于 2023-08-03 10:05:20 修改

阅读量182

点赞数

分类专栏：前端文章标签： java 正则表达式 html5 javascript

于 2022-04-16 10:39:28 首次发布

本文链接：https://blog.csdn.net/qq_41428418/article/details/124209758

版权

前端专栏收录该内容

9 篇文章 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">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
      <!--导入angularJS文件-->
<!--    <script src="js/angular.min.js"></script>-->
	<!--导入jquery-->
	<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>
    <!-- 头部 end -->
    <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">
<!--        				<button type="button" id="btn_sub">登录</button>-->
						<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>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>

</html>

Major_xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
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>黑马旅游网-登录</t
复制链接

扫一扫

专栏目录