    <?php require "layout/header.php" ?>

    <?php require "layout/pageBanner.php" ?>

    <!-- content -->
    <section class="content pagecontent">
    	<div class="container">
			<div class="content-box panel-shadow">
				<div class="page-title">
					<h2 class="title  border-theme"><span class="text-theme">新用户注册</span></h2>
				</div>
				<form class="form-horizontal validate-form" class="" method="post" name="userRegister" autocomplete="off" id="userRegister">
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>您的Email:</label>
						<div class="col-sm-4">
							<input class="form-control" id="email" name="email" value="" type="text" maxlength="254">
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>请输入您正确的Email邮箱地址，以便接收我们的激活邮件</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>姓名:</label>
						<div class="col-sm-4">
							<input class="form-control" id="userName" name="userName" value="" type="text" maxlength="50">
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>请填写您的真实姓名</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>登录密码:</label>
						<div class="col-sm-4">
							<input class="form-control" id="password" name="password" value="" type="password" maxlength="16">
							<div class="ps-letter">
	                            <span class="letter-group" id="strengthL">弱</span>
	                            <span class="letter-group" id="strengthM">中</span>
	                            <span class="letter-group" id="strengthH">强</span>
	                         </div>
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>6-16个字符，请使用字母加数字或符号的组合密码。请不要单独使用数字、字母或符号</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>确认密码:</label>
						<div class="col-sm-4">
							<input class="form-control" id="rePassword" name="rePassword" value="" type="password" maxlength="16" disabled="">
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>请再输一次密码!</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>手机号码:</label>
						<div class="col-sm-4">
							<input class="form-control" id="mobile" name="mobile" value="" type="text" maxlength="254">
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>请输入您的手机号，以便接收激活码</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label"><span class="text-danger pr5">*</span>手机验证码:</label>
						<div class="col-sm-4">
							<div class="input-group">
								<input class="form-control" id="mobileCheckCode" name="mobileCheckCode" value="" type="text" maxlength="4">
								<span class="input-group-btn">
									<button type="button" class="btn btn-default btn-sm" id="getMobileCheckCode">获取验证码</button>
								</span>
							</div>
						</div>
						<div class="col-sm-6">
							<p class="help-block"><span class="glyphicon glyphicon-info-sign pr5"></span>1分钟内没有收到验证码，请检查您填写的手机号码是否正确或重新发送(如果仍然收不到验证码建议使用谷歌Chrome或者360浏览器注册)</p>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label">座机:</label>
						<div class="col-sm-4">
							<input class="form-control" id="phone" name="phone" value="" type="text" maxlength="20">
						</div>
						<div class="col-sm-6"></div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">传真:</label>
						<div class="col-sm-4">
							<input class="form-control" id="fax" name="fax" value="" type="text" maxlength="20">
						</div>
						<div class="col-sm-6"></div>
					</div>
					<div class="form-group">
						<div class="col-sm-4 col-sm-offset-2">
							<label class="checkbox-inline pull-left"><input value="" id="confirmAgreement" name="confirmAgreement" type="checkbox" onclick="$('#submitRegister').toggleClass('disabled')">我已阅读并同意</label>
							<a class="agreement-link" href="#agreement" data-toggle="modal">《网站使用条款》</a>
							<button type="button" class="btn btn-theme btn-block mt10 btn-confirm disabled" id="submitRegister">提交账户信息</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</section>
	
	<!-- 网站使用条款 -->
	<div class="modal fade" id="agreement" tabindex="-1" role="dialog">
		<form class="modal-dialog validate-form" role="document" method="post" autocomplete="off">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">网站使用条款</h4>
				</div>
				<div class="modal-body" style="max-height: 400px; overflow-y: scroll; line-height: 200%;">
					<strong>1.&nbsp;网站使用条款的接受</strong><br>
					通过访问和/或使用本网站，表示您同意接受本协议的所有条件和条款。东莞元佳实验科技有限公司作为<strong>元佳实验</strong>的运营者依据本协议为您提供服务。如果您不愿接受本协议的全部条件和条款，请您不要访问或使用本网站。<br>
					<strong>2.&nbsp;本协议的变更和修改</strong><br>
					东莞元佳实验科技有限公司作为有权随时对本协议进行修改，并且一旦发生协议条款的变动，本网站将在相关页面上提示修改的内容；用户如果不同意本协议的修改，可以放弃使用或访问本网站或取消已经获得的服务；如果用户选择在本协议变更后继续访问或使用本网站，则视为用户已经接受本协议的修改。<br>
					<strong>3.&nbsp;用户行为&nbsp;</strong><br>
					（1）用户帐号、密码和安全<br>
					用户一旦注册成功，便成为本网站的合法用户，将得到一个密码和帐号。用户应采取合理措施维护其密码和帐号的安全。用户对利用该密码和帐号所进行的一切活动负全部责任；由该等活动所导致的任何损失或损害由用户承担，本网站不承担任何责任。&nbsp;
					用户的密码和帐号遭到未授权的使用或发生其他任何安全问题，用户可以立即通知上海务邦电子商务有限公司，并且用户在每次连线结束，应结束帐号使用，否则用户可能得不到本网站的安全保护。&nbsp;对于用户长时间未使用的帐号，本网站有权予以关闭。<br>
					（2）用户应遵守以下法律及法规<br>
					用户同意遵守《中华人民共和国保守国家秘密法》、《中华人民共和国著作权法》、《中华人民共和国计算机信息系统安全保护条例》、《计算机软件保护条例》、《互联网电子公告服务管理规定》、《信息网络传播权保护条例》等有关计算机及互联网规定的法律、法规、实施办法。在任何情况下，本网站合理地认为用户的行为可能违反上述法律、法规，本网站可以在任何时候，不经事先通知终止向该用户提供服务。<br>
					<strong>4.&nbsp;用户隐私权制度&nbsp;</strong><br>
					当用户注册本网站的服务时，用户须提供个人信息。本网站收集个人信息的目的是为用户提供尽可能多的个人化网上服务以及为合作伙伴提供一个方便的途径来接触到适合的用户，并且可以发送具有相关性的内容和广告。在此过程中，网站的合作伙伴绝对不会接触到用户的个人信息。本网站不会在未经合法用户授权时，公开、编辑或透露其个人信息及保存在本网站中的非公开内容，除非有下列情况：<br>
					（1）有关法律规定或本网站合法服务程序规定；<br>
					（2）在紧急情况下，为维护用户及公众的权益；<br>
					（3）为维护本网站的商标权、专利权及其他任何合法权益；<br>
					（4）其他需要公开、编辑或透露个人信息的情况。<br>
					在以下（包括但不限于）几种情况下，本网站有权使用用户的个人信息：<br>
					（1）在进行抽奖或实物体验时，本网站可能会与赞助商共享用户的个人信息，在这些情况下本网站会在发送用户信息之前进行提示，并且用户可以通过不参与来终止传送过程。<br>
					（2）本网站可以将用户信息与第三方数据匹配。&nbsp;<br>
					（3）本网站会通过透露合计用户统计数据，向未来的合作伙伴、广告商及其他第三方以及为了其他合法目的而描述本网站的服务。&nbsp;<br>
					（4）本网站会向用户发送关于本网站不同产品和服务的信息或者本网站认为用户会感兴趣的其他产品和服务。如果用户不希望收到这样的邮件，只需在提供个人信息时或其他任何时候告知本网站即可。另外，本网站会竭尽全力保护用户的信息，但本网站不能确信或保证任何个人信息的安全性，用户须自己承担风险。<br>
					<strong>5.&nbsp;关于第三方链接&nbsp;</strong><br>
					本网站服务可能会提供与其他国际互联网网站或资源进行链接，但并不代表本网站赞成链接到的第三方网页上的内容或立场。对于前述网站或资源是否可以利用，本网站也不承担担保责任。因使用或依赖上述网站或资源所生的损失或损害，本网站也不负担任何责任。<br>
					<strong>6.&nbsp;服务的终止</strong><br>
					本网站有权在任何时候，暂时或永久地终止本网站服务（或任何一部分），无论是否通知。本网站对服务的终止对用户和任何第三人不承担任何责任。本网站有权基于任何理由，终止用户的帐号、密码或使用本服务，本网站采取上述行为均不需通知，并且对用户和任何第三人不承担任何责任。<br>
					<strong>7.&nbsp;通知</strong><br>
					本网站向用户发出的通知，采用电子邮件或页面公告的形式。本协议条款的修改或其他事项变更时，本网站将会以上述某一形式进行通知。<br>
					<strong>8.&nbsp;法律的适用和管辖&nbsp;</strong><br>
					本使用协议的生效、履行、解释及争议的解决均适用中华人民共和国法律，与本协议有关的争议提交由上海务邦电子商务有限公司所在地的法院管辖。本服务条款因与中华人民共和国现行法律相抵触而导致部分无效，不影响其他部分的效力。&nbsp;
				</div>
        <div class="modal-footer">
					<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">关闭</button>
				</div>
			</div>
		</form>
	</div>

    <?php require "layout/footer.php" ?>

    <script>$(function(){$("#pageName").text("用户注册")})</script>

    <script type="text/javascript">
    	$(function(){
    		var wait = getCookieValue("secondsremained");//获取cookie值
		    if(wait>0){
		        waitingRetry();//开始倒计时
		    };
		    
		    //验证密码强度
			$("#password").on("keyup",function(){
				var val = $(this).val();
				$("#rePassword").val("").removeClass("error").next("label.error").remove();
				if($.trim(val)){
					switch(checkStrong(val)){
		                case 0:
		                case 1:
		                    $("#strengthL").attr("class","letter-group low");
		                    $("#strengthM, #strengthH").attr("class","letter-group");
		                    $("#rePassword").attr("disabled",true);
		                    break;
		                case 2:
		                	$("#strengthL, #strengthM").attr("class","letter-group medium");
		                	$("#strengthH").attr("class","letter-group");
		                    $("#rePassword").attr("disabled",false);
		                    break;
		                default:
		                	$("#strengthL, #strengthM, #strengthH").attr("class","letter-group strong");
		                    $("#rePassword").attr("disabled",false);
		            }
				}else{
					$("#strengthL, #strengthM, #strengthH").attr("class","letter-group");
					$("#rePassword").attr("disabled",true);
				}
			});
			
			//验证邮箱是否重复
			$("#email").on("blur",function(){
				var email = $.trim($(this).val());
				//验证邮箱
				if(email){
					var myRegExp =  /^([a-zA-Z0-9]+[_|\-\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-\.]?)*[a-zA-Z0-9]+((\.[a-zA-Z]{2,3}){1,2})$/gi;
					var answerind = email.search(myRegExp);
					var answerarr = email.match(myRegExp);
					if (answerind != 0 || answerarr[0].length != email.length){
						return false;
					}else{
						$.ajax({
							type: "GET",
							url: apiDomain + "?mod=vmain.checkEmail",
							data: {
								email: email
							},
							dataType: "json",
							beforeSend: function(){
								$(".error[for='email']").remove();
								$("#email").removeClass("error");
							},
							success: function(data){
								if(!data.success){
									$("#email").addClass("error").after('<label class="error" for="email">'+ data.msg +'</label>');
								}
					    	}
					    });
					}
				}
			});
			
			//验证手机是否重复
			$("#mobile").on("blur",function(){
				var mobile = $.trim($(this).val());
				//验证邮箱
				if(mobile){
					if(/^([1][0-9]{10})$/.test(mobile)) {
			            $.ajax({
							type: "GET",
							url: "XXXXXXXXXXX",
							data: {
								mobile: mobile
							},
							dataType: "json",
							beforeSend: function(){
								$(".error[for='mobile']").remove();
								$("#mobile").removeClass("error");
							},
							success: function(data){
								if(!data.success){
									$("#mobile").addClass("error").after('<label class="error" for="mobile">'+ data.msg +'</label>');
								}
					    	}
					    });
			    	}
				}
			});
			
			//获取手机验证码
			$("#getMobileCheckCode").on("click",function(){
				var mobile = $.trim($("#mobile").val());
		
				if($("#mobile").hasClass("error")){
					return false;
				}
				
				$(".error[for='rePassword'], .error[for='regPicCheckCode'], .error[for='mobileCheckCode']").remove();
				$("#regPicCheckCode, #mobile, #mobileCheckCode").removeClass("error");
				$("#mobileCheckCode").val("");
				
				var flag = true;
				//验证手机号
				if(mobile){
					if(! /^([1][0-9]{10})$/.test(mobile)) {
			            $("#mobile").addClass("error").after('<label class="error" for="mobile">手机号码格式错误</label>');
						flag = false;
			        }
				}else{
					$("#mobile").addClass("error").after('<label class="error" for="mobile">手机号不能为空</label>');
					flag = false;
				}
				
				//==================================获取手机验证码==================================
				if(flag){
					$("#verificationCode").modal();
					$("#regPicCheckCode").val("");
				}
				
			});
			
			//获取短信
			$("#verificationCode .btn-confirm").on("click",function(){
				var $this = $(this)
				var mobile = $.trim($("#mobile").val());
				var regPicCheckCode = $.trim($("#regPicCheckCode").val());
				var flag = true;
				
				if($("#mobile").hasClass("error")){
					return false;
				}
				
				$(".error[for='rePassword'], .error[for='regPicCheckCode'], .error[for='mobileCheckCode']").remove();
				$("#regPicCheckCode, #mobile, #mobileCheckCode").removeClass("error");
				$("#mobileCheckCode").val("");
				
				//验证验证码
				if(!regPicCheckCode){
					$("#regPicCheckCode").addClass("error").after('<label class="error" for="regPicCheckCode">请输入验证码</label>');
					flag = false;
				}
		
				
				//==================================获取手机验证码==================================
				if(flag){
					$.ajax({
						type: "GET",
						url: "XXXXXXXXXXXXXX",
						data: {
							mobile: mobile,
							regPicCheckCode: regPicCheckCode
						},
						dataType: "json",
						beforeSend: function(){
							$this.addClass("disabled").text("提交中...");
						},
						success: function(data){
							if(data.success){
								$this.removeClass("disabled").text("确定");
								//获取成功
								$("#verificationCode").modal("hide");
								addCookie("secondsremained",60,60);
								waitingRetry();
							}else{
								//获取失败
								$.gritter.add({
									class_name:"gritter-error",
									title: data.msg,
									time: 2000,
									sticky: false
								});
								setTimeout(function(){$this.removeClass("disabled").text("确定")},1000);
							}
				    	},
				    	error: function(){
				    		//获取失败
							$.gritter.add({
								class_name:"gritter-error",
								title: "手机验证码获取失败，请稍后重试",
								time: 2000,
								sticky: false
							});
				       		setTimeout(function(){$this.removeClass("disabled").text("确定")},1000);
				    	}
				    });
				}
			});
			
			//注册验证
			$("#submitRegister").on("click",function(){
				var $this = $(this);
				var email = $.trim($("#email").val());
				var userName = $.trim($("#userName").val());
				var passWord =  $.trim($("#password").val());
				var rePassword = $.trim($("#rePassword").val());
				var mobile = $.trim($("#mobile").val());
				var mobileCheckCode = $.trim($("#mobileCheckCode").val());
				var flag = true;
				
				if($("#email").hasClass("error") || $("#userName").hasClass("error") || $("#mobile").hasClass("error")){
					return false;
				}
				
				$("#userRegister label.error").remove();
				$("#userRegister .error").removeClass("error");
				
				
				//验证账号
				if(email){
					var myRegExp =  /^([a-zA-Z0-9]+[_|\-\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-\.]?)*[a-zA-Z0-9]+((\.[a-zA-Z]{2,3}){1,2})$/gi;
					var answerind = email.search(myRegExp);
					var answerarr = email.match(myRegExp);
					if (answerind != 0 || answerarr[0].length != email.length){
						$("#email").addClass("error").after('<label class="error" for="email">输入的Email格式不正确,请重新输入</label>');
						flag = false;
					}
				}else{
					$("#email").addClass("error").after('<label class="error" for="email">邮箱不得为空</label>');
					flag = false;
				}
				
				if(!userName){
					$("#userName").addClass("error").after('<label class="error" for="userName">姓名不能为空</label>');
					flag = false;
				}
				
				
				//验证密码
				if(passWord){
					if($("#strengthL").hasClass("low")){
						$("#password").addClass("error").after('<label class="error" for="password">密码强度太弱，请重新设置密码</label>');
						flag = false;
					}
				}else{
					$("#password").addClass("error").after('<label class="error" for="password">密码不能为空</label>');
					flag = false;
				}
				
				//验证确认密码
				if(rePassword){
					if(rePassword != passWord){
						$("#rePassword").addClass("error").after('<label class="error" for="rePassword">两次输入的密码必须一致</label>');
						flag = false;
					}
				}else{
					$("#rePassword").addClass("error").after('<label class="error" for="rePassword">请再输一次密码</label>');
					flag = false;
				}
				
				//验证手机号
				if(mobile){
					if(! /^([1][0-9]{10})$/.test(mobile)) {
			            $("#mobile").addClass("error").after('<label class="error" for="mobile">手机号码格式错误</label>');
						flag = false;
			        }
				}else{
					$("#mobile").addClass("error").after('<label class="error" for="mobile">手机号不能为空</label>');
					flag = false;
				}
				
				//验证手机验证码
				if(mobileCheckCode){
					if(! /^\d{4}$/.test(mobileCheckCode)) {
			            $("#mobileCheckCode").addClass("error").parent().after('<label class="error" for="mobileCheckCode">手机短信验证码必须为4位数字</label>');
			            flag = false;
			        }
				}else{
					$("#mobileCheckCode").addClass("error").parent().after('<label class="error" for="mobileCheckCode">请输入手机短信验证码</label>');
					flag = false;
				}
				//提交验证
				if(flag){
					$.ajax({
						type: "GET",
						url: "XXXXXXXXX",
						data: {
							email: email,
							username: userName,
							password: passWord,
							rePassword: rePassword,
							regCheckCode: mobileCheckCode,
							mobile: mobile
						},
						dataType: "json",
						beforeSend: function(){
							$this.addClass("disabled").text("正在提交账户信息...");
						},
						success: function(data){
							setTimeout(function(){$this.removeClass("disabled").text("提交账户信息")},1000);
							if(data.success){
								//注册成功
								$.gritter.add({
									class_name:"gritter-success",
									title: "注册成功！",
									time: 2000,
									sticky: false
								});
								
							}else{
								//注册失败
								$.gritter.add({
									class_name:"gritter-error",
									title: data.msg,
									time: 2000,
									sticky: false
								});
							}
				    	},
				    	error: function(){
				    		//注册失败
							$.gritter.add({
								class_name:"gritter-error",
								title: "账户信息提交失败，请稍后重试",
								time: 2000,
								sticky: false
							});
				      setTimeout(function(){$this.removeClass("disabled").text("提交账户信息")},1000);
				    	}
				    });
				}
			});
    	});
    </script>
</body>
</html>
