HTML5写的简单登录页面

整体效果图:
HTML5写的简单登录页面_第1张图片
主要代码:






	
	
		欢迎来到登录界面
	 
	 
	 
	 
	 
	 
	 
	 

	 
	 
	 
	 

  

来源:

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

你可能感兴趣的:(HTML5写的简单登录页面)