<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

	       	<!-- 基本信息 邮箱激活 注册成功 开始 -->
        	<div class="reg_list">
                <div class="plan">
                    <ul>
                        <li><label>1</label></li>
                        <li><label>2</label></li>
                        <li><label>3</label></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="listing">
                    <ul>
                        <li id="color_ff6d37">基本信息</li>
                        <li id="color_ff6d37">邮箱激活</li>
                        <li>注册成功</li>
                    </ul>
                </div>
            </div>
            <!-- 基本信息 邮箱激活 注册成功 结束 -->
            <!-- 基本信息 开始 -->
            <div id="rf_1">
            <div class="reg_form">
            	<form action="<c:url value=''/>" id="registerForm" name="registerForm" method="post">
                	
                    <p>
                        <span>email地址</span>
                        <span><input type="text" placeholder="Email地址" name="email" id="email"  value="${user.validataCode }" onblur="checkExistEmail(this)"/></span>
                        <span class="error_block"><img src="<c:url value='/resources/images/reg_error.png'/>">请输入正确邮箱</span>
                    </p>
					<div class="clear"></div>
					<input type="hidden" id="ryzm_5">
                     <p>
                         <span>手机验证码</span>
                         <span id="code_input"><input type="text" id="ryzm" name='j_captcha' placeholder="请输入验证码" onchange="checkYzm(this);"></span>
                         <span><input type="button" id="auth_code1" value="获取验证码"/></span>
                      	 <span class="error_block"><img src="<c:url value='/resources/images/reg_error.png'/>">不能为空</span>
                  	 </p>
                  
                  	<div class="clear"></div>
                    <p class="check_box">
                        <input type="checkbox" id="chek1"/>
                        <label  for="chek1"></label>
                        <span class="deal">我已阅读并同意<a href="<c:url value='/index/protocol/init' />" target="_blank">《百联保用户协议》</a></span>
                       	<span class="error_block"><img src="<c:url value='/resources/images/reg_error.png'/>">不能为空</span>
                    </p>
                    <p class="sub_mit"><input type="button" id="regUp" value="下一步" onclick="register();"></p>
                    <div class="clear"></div>
                </form>
            </div>
<!-- 基本信息 结束 -->
</div>
<div id="rf_2" style="display: none;">
<div class="reg_finish">
	<p><img src="<c:url value='/resources/images/finish_img.jpg'/>" width="68" height="68" title="注册成功"></p>
    <div class="clear"></div>
    <h4>注册成功</h4>
    <p><a href="<c:url value='/'/>">购买保险</a><label></label><a href="<c:url value='/user/login/init'/>">立即登录</a></p>
</div>
</div>

<!-- script -->
<script type="text/javascript">
	var baseUrl = '${pageContext.request.contextPath }';
    var msg = '${msg}';
    if(msg.length>1){
    	alert(msg);
    }
    function checkEmail(value) {
    	var re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
    	return re.test(value);
    }
    function checkYzm(obj) {
    		
	   		$.ajax({
	   			type: 'POST',
	   			url: baseUrl + "/user/register/checkYzm.json",
	   			data:{'captcha': $('#'+obj.id).val()},
	   			dataType:"json",
	   			success: function(json){
	   				if(json.statusCode == "200") {
	   					$("#ryzm").parent().next().next().attr("style","display:none;");
	   					$("#ryzm_5").val("Y");
	   				}else{
	   					$("#ryzm").parent().next().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>验证码不正确");
	   		    		$("#ryzm").parent().next().next().attr("style","display:block;");
	   					$("#ryzm_5").val("N");
	   				}
	   			}
	   		}); 
    }
    var wait=60;
	function time1(o) {
	        if (wait == 0) {
	        	$("#auth_code1").val("重新获取");   
	        	$("#auth_code1").css("background-color","#ff6d37");
	            wait = 60;
				/*$("#btn").css("background-color","#229fff");*/
	        } else { // www.jbxue.com
	            $("#auth_code1").val("重新发送(" + wait + ")");
	            wait--;
				$("#auth_code1").css("background-color","#bbb6b6");
	            setTimeout(function() {
	                time1(o)
	            },
	            1000)
	        }
	    }
	
	document.getElementById("auth_code1").onclick=function(){
		var email = $("#email").val();
		if(email == ""){
			$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>手机不能为空");
    		$("#email").parent().next().attr("style","display:block;");
		}else{
			$("#email").parent().next().attr("style","display:none;");
    		$("#email").parent().next().attr("style","display:none;");
			$.ajax({
    			type: 'POST',
    			url: baseUrl + "/user/register/sendAuthCodeE",
    			data:{'email': email},
    			dataType:"json",
    			cache: false,
    			success: function(json){
    				if(json.statusCode == '200') {
    					$("#auth_code1").parent().next().attr("style","display:none;");
    					time1(this);
    				}else if(json.statusCode == '301') {
    					$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>"+json.resultDto.message);
    		    		$("#email").parent().next().attr("style","display:block;");
    				}else{
    					$("#auth_code1").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>"+json.resultDto.message);
    		    		$("#auth_code1").parent().next().attr("style","display:block;");
    				}
    			}
    		}); 
			
		}
	}
  //检查必选项
    function checkRegisterRequiredField(){
    	var email = $("#email").val();
    	var ryzm = $("#ryzm").val();
    	var readMe = $("#chek1").attr("checked");
    	if ( email == "" || $("#email").val() == $("#email").attr("defaultValue")) {
    		$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>邮箱不能为空");
    		$("#email").parent().next().attr("style","display:block;");
    		return false;
    	}else{
        	$("#email").parent().next().attr("style","display:none;");
        }
    	if(checkEmail(email) == false){
    		$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>邮箱格式有误");
    		$("#email").parent().next().attr("style","display:block;");
        	$('#email').focus();
        	 return false;
        }else{
        	$("#email").parent().next().attr("style","display:none;");
        }
    	
    	if ( ryzm == "" || $("#ryzm").val() == $("#ryzm").attr("defaultValue")) {
    		$("#ryzm").parent().next().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>验证码不能为空");
    		$("#ryzm").parent().next().next().attr("style","display:block;");
    		return false;
    	}else{
        	$("#ryzm").parent().next().next().attr("style","display:none;");
        }
    	
    	if($("#ryzm_5").val() != "N") {
			$("#ryzm").parent().next().next().attr("style","display:none;");
		}else{
			$("#ryzm").parent().next().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>验证码不正确");
    		$("#ryzm").parent().next().next().attr("style","display:block;");
    		return false;
		}
    	
    	if (readMe != "checked" || !readMe) {
    		$("#chek1").next().next().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>阅读《服务协议》并勾选");
    		$("#chek1").next().next().next().attr("style","display:block;");
    		//alert("请详细阅读《服务协议》并勾选");
    		return false;
    	}else{
    		$("#chek1").next().next().next().attr("style","display:none;");
    	}
    	
    	return true;
    }
    function register(){
    	var flag = checkRegisterRequiredField();

    	if (flag){
    		$.ajax({
    			type: 'POST',
    			url: baseUrl + "/user/registerSava",
    			data:{'email':$("#email").val()},
    			dataType:"html",
    			cache: false,
    			success: function(data){

    				if(json.statusCode == '200') {
    					$("#rf_1").hide();
    					$(".listing ul li").each(function(){
    						$(this).attr("id","color_ff6d37");
    					});
    					$("#rf_2").show();
    				}else if(json.statusCode == '301') {
    					$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>"+json.resultDto.message);
    		    		$("#email").parent().next().attr("style","display:block;");
    				}else{
    					alert(json.resultDto.message);
    				}
    			}
    		}); 
    		//$("#registerForm").submit();
    	}
    	
    }
    function checkExistEmail(obj) {
    	//var test = obj.value.replace(/[^\w\.\/]/ig,'');
    	var reg = /[^\w\.\/]/ig;  
    	
    	if(obj.value == "") {
    		$("#"+obj.id).parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>邮箱不能为空");
    		$("#"+obj.id).parent().next().attr("style","display:block;");
    		$("#"+obj.id).val('');
    	}if(checkEmail(obj.value) == false && obj.value != ""){
    		$("#email").parent().next().html("<img src='<c:url value="/resources/images/reg_error.png"/>'>邮箱格式有误");
    		$("#email").parent().next().attr("style","display:block;");
    		$("#email").val('');
        	$('#email').focus();
        } else{
    		$("#"+obj.id).parent().next().attr("style","display:none;");
    		if(obj.value != $("#email").attr("defaultValue")) {
        		$.ajax({
        			type: 'POST',
        			url: baseUrl + "/user/register/checkEmail",
        			data:{'email': obj.value},
        			dataType:"json",
        			async: false,
        			success: function(json){
        				if(json.statusCode == '1') {
        					$("#email").parent().next().html("<img title='"+json.resultDto.navTabId+"' src='<c:url value="/resources/images/reg_error.png"/>'>"+json.resultDto.message);
        		    		$("#email").parent().next().attr("style","display:block;");
        					$("#email").val('');
        					$("#email").focus();
        				}else{
        					$("#email").parent().next().attr("style","display:none;");
        				}
        			}
        		}); 
        	}
    	}
    	
    	
    }
    
    
</script>
</body>
</html>