登录注册form表单切换

<div class="ui-mask" id="mask" onselectstart="return false"></div>
	<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
		<div class="ui-dialog-title" id="dialogDrag"  onselectstart="return false;" >
			登录通行证
			<a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a>
		</div>
		<div class="ui-dialog-content">
			<form id="login-form" action="/login" method = "post">
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-username" name="username" type="text" placeholder="用户名" />
				</div>
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-password" name="password" type="password" placeholder="密码" />
				</div>
				<div class="ui-dialog-l40 test">
					<a href="#">忘记密码</a>
				</div>
				<div>
					<input class="ui-dialog-submit" type="submit" value="登录">
				</div>
				<div class="ui-dialog-l40 message">
					<a href="javascript:;">立即注册</a>
				</div>
			</form>
			<form id="register-form" action="/signup" method = "post">
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-username" id="username" name="username" type="text" placeholder="用户名" />
				</div>
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-password" id="password" name="password" type="password" placeholder="密码" />
				</div>
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-email" id="email" name="email" type="email" placeholder="邮箱" />
				</div>
				<div class="ui-dialog-pt15">
					<input class="ui-dialog-submit" type="submit" value="注册">
				</div>
				<div class="ui-dialog-l40 message">
					<a href="javascript:;">立刻登录</a>
				</div>
			</form>
			<form id="forget-form" action="/forget" method = "post">
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-email" name="email" type="email" placeholder="邮箱" />
				</div>
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-password" name="password" type="password" placeholder="新密码" />
				</div>
				<div class="ui-dialog-l40 ui-dialog-pt15">
					<input class="ui-dialog-input ui-dialog-input-password" name="again_password" type="password" placeholder="再次输入新密码" />
				</div>
				<div class="ui-dialog-pt15">
					<input class="ui-dialog-submit" type="submit" value="确认">
				</div>
				<div class="ui-dialog-l40 test">
					<a href="javascript:;">立刻登录</a>
				</div>
			</form>
		</div>
	</div>

var dialogInstace , onMoveStartId;	//	用于记录当前可拖拽的对象
	
// var zIndex = 9000;

//	获取元素对象	
function g(id){return document.getElementById(id);}

//	自动居中元素（el = Element）
function autoCenter( el ){
	var bodyW = document.documentElement.clientWidth;
	var bodyH = document.documentElement.clientHeight;

	var elW = el.offsetWidth;
	var elH = el.offsetHeight;

	el.style.left = (bodyW-elW)/2 + 'px';
	el.style.top = (bodyH-elH)/2 + 'px';
	
}

//	自动扩展元素到全部显示区域
function fillToBody( el ){
	el.style.width  = document.documentElement.clientWidth  +'px';
	el.style.height = document.documentElement.clientHeight + 'px';
}

//	Dialog实例化的方法
function Dialog( dragId , moveId ){

	var instace = {} ;

	instace.dragElement  = g(dragId);	//	允许执行 拖拽操作 的元素
	instace.moveElement  = g(moveId);	//	拖拽操作时，移动的元素

	instace.mouseOffsetLeft = 0;			//	拖拽操作时，移动元素的起始 X 点
	instace.mouseOffsetTop = 0;			//	拖拽操作时，移动元素的起始 Y 点

	instace.dragElement.addEventListener('mousedown',function(e){

		var e = e || window.event;

		dialogInstace = instace;
		instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ;
		instace.mouseOffsetTop  = e.pageY - instace.moveElement.offsetTop ;
		
		// instace.moveElement.style.zIndex = zIndex ++;
	})

	return instace;
}

//	在页面中侦听 鼠标弹起事件
document.onmouseup = function(e){
	
	dialogInstace = false;
	clearInterval(onMoveStartId);

}

//	在页面中侦听 鼠标移动事件
document.onmousemove = function(e) {
	var e = e || window.event;
	var instace = dialogInstace;
	if (instace) {
		
		var maxX = document.documentElement.clientWidth -  instace.moveElement.offsetWidth;
		var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ;

		instace.moveElement.style.left = Math.min( Math.max( ( e.pageX - instace.mouseOffsetLeft) , 0 ) , maxX) + "px";
		instace.moveElement.style.top  = Math.min( Math.max( ( e.pageY - instace.mouseOffsetTop ) , 0 ) , maxY) + "px";
	}
	if(e.stopPropagation) {
		e.stopPropagation();
	} else {
		e.cancelBubble = true;
	}
};

//	拖拽对话框实例对象
Dialog('dialogDrag','dialogMove');

function onMoveStart(){

}


//	重新调整对话框的位置和遮罩，并且展现
function showDialog(){
	g('dialogMove').style.display = 'block';
	g('mask').style.display = 'block';
	autoCenter( g('dialogMove') );
	fillToBody( g('mask') );
}

//	关闭对话框
function hideDialog(){
	g('dialogMove').style.display = 'none';
	g('mask').style.display = 'none';
}

//	侦听浏览器窗口大小变化
//window.onresize = showDialog;

//登陆注册切换
$('.message a').click(function () {
	$("#forget-form").css('display','block');
	$('form').animate({
		height: 'toggle',
		opacity: 'toggle'
	}, 'slow');
});

//登录和忘记密码切换
$('.test a').click(function () {
	$("#register-form").css('display','block');
	$('form').animate({
		height: 'toggle',
		opacity: 'toggle'
	}, 'slow');
});

// 登录form表单
$('#login-form').submit(function (event) {
	event.preventDefault();
	var form = $(this);
	var formData = new FormData(this);
	$.ajax({
		type: form.attr('method'),
		url: form.attr('action'),
		data: formData,
		mimeType: "multipart/form-data",
		contentType: false,
		cache: false,
		processData: false,
		dataType: 'json',
		success: function(res) {
			if (res.status === 0) {
				message.showSuccess('登录成功');
				location.href = "/"
			}else if(res.status === 1){
				message.showError('密码错误');
			}else if(res.status === 2){
				message.showError('用户名不存在');
				$('#login-form')[0].reset();
			}
		},
		error: function(err){
			message.showError('服务器错误');
		}
	})
});

// 注册form表单
$('#register-form').submit(function (event) {
	event.preventDefault();
	var form = $(this);
	var formData = new FormData(this);
	var email = formData.get('email');
	var username = formData.get('username');
	var password = formData.get('password');
	if(username === ""){
		message.showError('用户名不能为空！');
		return ;
	}else if(password === ""){
		message.showError('密码不能为空！');
		return ;
	}else if(email === ""){
		message.showError('邮箱不能为空！');
		return ;
	}
	$.ajax({
		type: form.attr('method'),
		url: form.attr('action'),
		data: formData,
		mimeType: "multipart/form-data",
		contentType: false,
		cache: false,
		processData: false,
		dataType: 'json',
		success: function(res) {
			if (res.status === 0) {
				message.showSuccess('注册成功');
				$('#register-form .message a').click();
			}else if(res.status === 1){
				message.showError('该用户名已被注册');
			}else if(res.status === 2){
				message.showError('该邮箱已被注册');
				$('#login-form')[0].reset();
			}
		},
		error: function(err){
			message.showError('服务器错误');
		}
		})
});

// 忘记密码form表单
$('#forget-form').submit(function (event) {
	event.preventDefault();
	var form = $(this);
	var formData = new FormData(this);
	var email = formData.get('email');
	var password = formData.get('password');
	var again_password = formData.get('again_password');
	if(email === ""){
		message.showError('邮箱不能为空！');
		return ;
	}else if(password === ""){
		message.showError('密码不能为空！');
		return ;
	}else if(again_password === ""){
		message.showError('密码不能为空！');
		return ;
	}else if(password != again_password){
		message.showError('两次密码不同，请重新输入！');
		return ;
	}
	$.ajax({
		type: form.attr('method'),
		url: form.attr('action'),
		data: formData,
		mimeType: "multipart/form-data",
		contentType: false,
		cache: false,
		processData: false,
		dataType: 'json',
		success: function(res) {
			if (res.status === 0) {
				message.showSuccess('修改成功，请登录！');
				location.href = "/"
			}else if(res.status === 1){
				message.showError('邮箱不存在！');
			}
		},
		error: function(err){
			message.showError('服务器错误');
		}
	})
});