<#-- 找回密码第一步 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<base href="${baseURL}">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>找回密码 - ${title}</title>
	<meta name="keywords" content="${keywords}"/>
	<meta name="description" content="${description}"/>
	<link rel="shortcut icon" type="image/x-icon" href="${baseURL}${commonPath}images/favicon.ico" media="screen" />
	<link href="${commonPath}css/common.css" type="text/css" rel="stylesheet" >
	<link href="${commonPath}css/themify-icons/style.css" type="text/css" rel="stylesheet">
	<script language="javascript" src="${commonPath}js/tool.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/ajax.js" type="text/javascript"></script>
	<script language="javascript" src="${commonPath}js/json2.js" type="text/javascript"></script>
	<script type="text/javascript" src="${commonPath}js/jquery/jquery.min.js" language="javascript"></script>
	<link href="${commonPath}js/layer/skin/default/layer.css"  type="text/css" rel="stylesheet"/>
	<script type="text/javascript" src="${commonPath}js/layer/layer.js" language="javascript"></script>
</head>

<body>
<#-- 引入页头 -->
<@include action="${newPublic_2}"/>
<div class="skeleton">
	<div class="main wrap backgroundModule" >
	
		<div style="background: #fff; height: 1px;"></div>
		<div class="findPassWordModule" >
        	<div class="tabs-nav">
	        	<div>
	        		<div id="local_tab" class="tabs-tab">
	        			<a href="javascript:void(0)" class="active">账号密码找回</a>
	        		</div>
        			<div id="mobile_tab" class="tabs-tab">
        				<a href="javascript:void(0)">手机号找回</a>
        			</div>
	        	</div>
        	</div>
        	
        	<div class="box">
	        	<div class="form">
					<!-- 令牌标记 -->
					<input type="hidden" id="token" name="token" value="${token}">
		        	<div class="form-field">
		        		<!-- form-field-container form-field-error -->
		        		<div id="account_field_error" class="form-field-container">
			        		<div class="form-field-text" >
			        			<div class="form-field-input-container">
				        			<input id="account" maxLength="40" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
				        			<!-- <label class="mi-floating-label form-field-active ">账号</label>-->
				        			<label class="form-field-label">账号</label>
			        			</div>
			        		</div>
			        		
		        			<div id="account_prompt_error" class="form-field-prompt-error"></div>
		        		</div>
		        	</div>
		        	<div class="form-field" >
		        		<div id="mobile_field_error" class="form-field-container">
			        		<div class="form-field-text">
			        			<div class="form-field-input-container">
				        			<input id="mobile" maxLength="11" class="form-field-text-input" type="text" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
				        			<label class="form-field-label">手机号</label>
			        			</div>
			        		</div>
		        			<div id="mobile_prompt_error" class="form-field-prompt-error"></div>
		        		</div>
		        	</div>
		        	<div id="captchaValue_field" class="form-field">
			        	<div id="captchaValue_field_error" class="form-field-container">
			        		<div class="form-field-text">
					        	<div class="form-field-input-container">
						        	<input type="hidden" id="captchaKey" name="captchaKey" value="${captchaKey}">
						        	<input id="captchaValue" class="form-field-text-input" type="text" maxlength="4" value="" onfocus="inputBoxClickTip(this);" onblur="inputBoxOutTip(this);">
						        	<label class="form-field-label">验证码</label>
								</div>
						        <div class="form-field-image-container">
									<img id="captcha" src="captcha/${captchaKey!}.jpg" onClick="replaceCaptcha();" tabindex="4" />
									
						        </div>
						        <div class="form-field-button-container" style="background: #fff;">
						        	<button type="button" class="btn btn-link" tabindex="-1" onClick="replaceCaptcha();">换一幅</button>
						        </div>
						    </div>
						    <div id="captchaValue_prompt_error" class="form-field-prompt-error"></div>
						</div>
		        	</div>
        		</div>
        	</div>
        	<div id="token_prompt_error" style="color: red;">${(error['token'])!}</div>

       		<div class="submitButton-box">
				<a href="javascript:void(0);" onClick="javascript:ajaxSubmit()" tabindex="6">提&nbsp;交</a>
			</div>
		</div>
	</div>
</div>
<#--引入页脚-->
<@include action="${newPublic_3}"/>


<script language="javascript" type="text/javascript">
	$(".form-field").find(".form-field-input-container").bind("mousedown",function(e) {
		$(this).find(".form-field-text-input").focus();

		if($(this).find(".form-field-label").hasClass("form-field-active")){
			return;
		
		}
		$(this).find(".form-field-label").addClass("form-field-active");
	});
	
	$(document).mousedown(function (e) {
        var target = $(e.target);
        if (target.closest(".form-field-input-container").length == 0) {
            $(".form-field-input-container").each(function(){
			    if($(this).find(".form-field-label").hasClass("form-field-active")){
					if($(this).find('input[type="text"]').val() == "" || $(this).find('input[type="password"]').val() == ""){
						$(this).find(".form-field-label").removeClass("form-field-active");
					}
					
				}
			});
        }
    });
	
	//监听Tab键
    $(document).on('keyup',function (e) {
	    if(e.keyCode == 9){
	    	var input = $(this).find('input:focus');
	    	if (input.length) {
		    	if(!input.parent().parent().find(".form-field-label").hasClass("form-field-active")){
					input.parent().parent().find(".form-field-label").addClass("form-field-active");
				}
		    }
		}
	});
    //解决提交按钮的click和blur事件冲突
	$(document).ready(function(){
		$("input[type='button']").mousedown(function(e){
	    	e.preventDefault();
		});
		$("a[href='javascript:void(0);']").mousedown(function(e){
	    	e.preventDefault();
		});
		
	});
</script>
<script language="javascript" type="text/javascript">	
	//选择账号类型
	$(document).ready(function(){
		//选择
		$(".tabs-nav").find(".tabs-tab").each(function(){
			if($(this).find("a").hasClass("active")){
				selectAccountType($(this).attr("id"));
			}
			
			$(this).bind("click",function(e) {
				$(".tabs-nav").find(".tabs-tab").each(function(){
					$(this).find("a").removeClass("active");
				});
				$(this).find("a").addClass("active");
				selectAccountType($(this).attr("id"));
			});
		});
	});
	
	function selectAccountType(id){
		if(id == "local_tab"){//本地账号密码用户
			$("#account_field_error").parent().show();
			$("#mobile_field_error").parent().hide();
		}
		if(id == "mobile_tab"){//手机用户
			$("#account_field_error").parent().hide();
			$("#mobile_field_error").parent().show();
		}
	}
	
	//点击输入框提示
	function inputBoxClickTip(obj){
	
	
	}
	//离开输入框提示
	function inputBoxOutTip(obj){
		verification(obj.id);
	}
	
	//ajax提交
	function ajaxSubmit(){
		$(".submitButton-box").find("a").attr("disabled","disabled");
		
		
		
		if(allVerification() == false){
			//需引入layer
     		layer.msg('请填好资料再提交', {
				time: 3000 //3秒关闭（如果不配置，默认是3秒）
				},function(){//关闭后的操作
						
				}
			);
			return;
		}
		
		var parameter = getParameter();

		post_request(function(value){
			if(value != ""){
				var returnValue = JSON.parse(value);//JSON转为对象
				var jumpUrl = "";
				var success = "false";
				for(var key in returnValue){
					if(key == "success"){	
						success = returnValue[key];	
					}if(key == "jumpUrl"){	
						jumpUrl = returnValue[key];	
					}else if(key == "error"){
						var errorValue = returnValue[key];
						for(var error in errorValue){
							if(error != ""){
								$("#"+error+"_prompt_error").html(errorValue[error]);
								$("#"+error+"_prompt_error").show();
								$("#"+error+"_field_error").addClass("form-field-error");	
							}
						}
						$(".submitButton-box").find("a").removeAttr("disabled");
					}else if(key == "captchaKey"){//显示验证码	
					
						var captchaKey = returnValue[key];
						
						if(captchaKey != ""){
							//设置验证码Key
							$("#captchaValue_field").show();
							//设置验证码Key
							$("#captchaKey").val(captchaKey);
							//设置验证码图片
							replaceCaptcha();
						}
					}
				}
				if(success == "true"){
					//跳转到第二步
					window.location.href = getBasePath()+jumpUrl;
				}
			}	
		},
			"findPassWord/step1?&timestamp=" + new Date().getTime(), true,parameter);
	}
	
	//组装参数
	function getParameter(){
		var parameter = "";
		//令牌标记
		var token = $("#token").val();
		parameter += "&token="+token;
		
		//验证码Key
		parameter += "&captchaKey="+encodeURIComponent($("#captchaKey").val());
		
		//验证码值
		parameter += "&captchaValue="+encodeURIComponent($("#captchaValue").val());
		
		//用户类型
		if($("#local_tab").find("a").hasClass("active")){
			parameter += "&type=10";
			//账号
			parameter += "&account="+encodeURIComponent($("#account").val().trim());
		}
		if($("#mobile_tab").find("a").hasClass("active")){
			parameter += "&type=20";
			//手机号
			parameter += "&mobile="+encodeURIComponent($("#mobile").val().trim());
		}
		return parameter;
	}
	
	
	
	//验证全部参数
	function allVerification(){
		var isVerification = true;
		//用户类型
		if($("#local_tab").find("a").hasClass("active")){
			if(verification("account") == false){
				isVerification = false;
			}
		}
		if($("#mobile_tab").find("a").hasClass("active")){
			if(verification("mobile") == false){
				isVerification = false;
			}
		}
		if(verification("captchaValue") == false){
			isVerification = false;
		}
		return isVerification;
	}

	//验证参数
	function verification(field){
		$("#"+field+"_prompt_error").hide();
		$("#"+field+"_field_error").removeClass("form-field-error");
	
		if(field == "account"){//账号
			var account = $("#"+field).val().trim();
			if(account == ""){
				$("#"+field+"_prompt_error").html("账号不能为空");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
			if(getStringLeng(account) < 3){
				$("#"+field+"_prompt_error").html("账号长度不能小于3位");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
			if(getStringLeng(account) > 20){
				$("#"+field+"_prompt_error").html("账号长度不能大于20位");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
			var pattern =  /^\w+$/;
			if(!pattern.test(account)){
				$("#"+field+"_prompt_error").html("账号只能输入由数字、26个英文字母或者下划线组成");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
		}
		if(field == "mobile"){//手机号
			var mobile = $("#"+field).val().trim();
			if(mobile == ""){
				$("#"+field+"_prompt_error").html("手机号不能为空");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
			if(getStringLeng(mobile) < 11){
				$("#"+field+"_prompt_error").html("手机号不正确");
				$("#"+field+"_prompt_error").show();
				$("#"+field+"_field_error").addClass("form-field-error");
				return false;
			}
		
		}
		if(field == "captchaValue"){//验证码
			if(!$("#captchaValue_field").is(":hidden")){//如果验证码框显示
				var captchaKey = $("#captchaKey").val().trim();
				var captchaValue = $("#"+field).val().trim();
				
				if(captchaValue == ""){
					$("#"+field+"_prompt_error").html("验证码不能为空");
					$("#"+field+"_prompt_error").show();
					$("#"+field+"_field_error").addClass("form-field-error");
					return false;
				}
				var submitButton_disabled = $(".submitButton-box").find("a").attr("disabled");
				get_request(function(value){
	            	if(value == "false" && submitButton_disabled != "disabled"){
	            	
	            		$("#"+field+"_prompt_error").html("验证码错误");
						$("#"+field+"_prompt_error").show();
						$("#"+field+"_field_error").addClass("form-field-error");
	            	}
	            },
			 		"userVerification?captchaKey="+captchaKey+"&captchaValue="+captchaValue+"&timestamp=" + new Date().getTime(), true);
	            	
			}
		}
		return true;
	}
	//更换验证码
	function replaceCaptcha(){
		var captchaKey = document.getElementById("captchaKey").value;
		document.getElementById("captcha").src = "captcha/"+captchaKey+".jpg?" + Math.random(); 
	}
</script>
</body></html>






