HTML5写的简单登录页面

最新推荐文章于 2024-08-01 12:02:26 发布

图解AI

最新推荐文章于 2024-08-01 12:02:26 发布

阅读量5.3w

点赞数 24

文章标签： HTML5

未经博主允许不得转载(https://github.com/ai-word)

本文链接：https://blog.csdn.net/baihuaxiu123/article/details/50801353

版权

整体效果图：
这里写图片描述
主要代码：


<!DOCTYPE html>
<html lang="en" class="no-js">

<head>
	<meta charset="utf-8">
	<title>
		欢迎来到登录界面
	</title> 
	 <meta name="viewport"content="width=device-width,initial-scale=1.0">
	 <meta name="description"content="">
	 <meta name="author"content="">
	 <!---CSS-->
	 <link rel="stylesheet" type="text/css" href="css/supersized.css">
	 <link rel="stylesheet" type="text/css" href="css/login.css">
	 <link rel="stylesheet" href="css/bootstrap.min.css">

	 <script src="js/jquery-1.8.2.min.js"></script>
	 <script type="text/javascript"src="js/jquery.form.js"></script>
	 <script type="text/javascript"src="js/tooltips.js"></script>
	 <script type="text/javascript"src="js/login.js"></script>
<body>
  <div class="page-container">
  <div class="main_box">
  <div class="login_box">
  <div class="login_logo">
  	<label for="j_loginname"class="t">
  	<h2>
  	<font color="red">
  		欢迎使用登录系统
  	</font>
  	</h2>
  	</label>
  </div>
  <div class="login_form">
  	<form action="index.html"id="login_form"method="post">
  		<div class="form-group">
						<label for="j_username" class="t">邮　箱：</label> 
						<input id="email" value="" name="email" type="text" class="form-control x319 in" 
						autocomplete="off">
					</div>
  		<div class="form-group">
						<label for="j_password" class="t">密　码：</label> 
						<input id="password" value="" name="password" type="password" 
						class="password form-control x319 in">
					</div>
					<div class="form-group">
						<label for="j_captcha" class="t">验证码：</label>
						 <input id="j_captcha" name="j_captcha" type="text" class="form-control x164 in">
						<img id="captcha_img" alt="点击更换" title="点击更换" src="images/captcha.jpeg" class="m">
					</div>
					<div class="form-group">
						<label class="t"></label>
						<label for="j_remember" class="m">
						<input id="j_remember" type="checkbox" value="true">&nbsp;记住登陆账号!</label>
					</div>
					</div>
					<div class="form-group space">
						<label class="t"></label>　　　
						<button type="button"id="submit_btn" 
						class="btn btn-primary btn-lg">&nbsp;登&nbsp;录&nbsp </button>
						<input type="reset" value="&nbsp;&nbsp;&nbsp;&nbsp;重&nbsp;置&nbsp;" class="btn btn-default btn-lg">
					</div>

  	</form>
  </div>	
  </div>
  </div>
  </div>
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<script src="js/scripts.js"></script>
<div style="text-align:center;">
<p>来源:<a href="http://www.mycodes.net/" target="_blank"></a></p>
</div>	
	
</body>
</head>
</html>

javasript中的代码

// JavaScript Document
//支持Enter键登录
		document.onkeydown = function(e){
			if($(".bac").length==0)
			{
				if(!e) e = window.event;
				if((e.keyCode || e.which) == 13){
					var obtnLogin=document.getElementById("submit_btn")
					obtnLogin.focus();
				}
			}
		}

    	$(function(){
			//提交表单
			$('#submit_btn').click(function(){
				show_loading();
				var myReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮件正则
				if($('#email').val() == ''){
					show_err_msg('邮箱还没填呢！');	
					$('#email').focus();
				}else if(!myReg.test($('#email').val())){
					show_err_msg('您的邮箱格式错咯！');
					$('#email').focus();
				}else if($('#password').val() == ''){
					show_err_msg('密码还没填呢！');
					$('#password').focus();
				}else{
					//ajax提交表单，#login_form为表单的ID。 如：$('#login_form').ajaxSubmit(function(data) { ... });
					//show_msg('登录成功咯！  正在为您跳转...','/');	
				}
			});
		});

源码demo下载地址：http://pan.baidu.com/s/1kTREtxl