{template Public:Page:header}
<div class="container">
     <div class="row">
               <div class="widget radius-bordered">
                    <div class="widget-header"> <span class="widget-caption"><i class="glyphicon glyphicon-user"></i> 欢迎注册成为{echo C('sitename')}会员</span> </div>
                    <div class="widget-body">
                         <div class="row">
                              <div class="col-lg-6">
                                   <div class="form-title"> <i class="glyphicon glyphicon-pencil"></i> 请填写注册信息,已有帐号? <a href="login">立即登录</a></div>
                                   <form data-bv-feedbackicons-validating="glyphicon glyphicon-refresh" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-message="This value is not valid" class="form-horizontal bv-form" method="post" id="registrationForm" novalidate>

                                        
                                         <div id="TypeEMail">
                                            <div class="form-group has-feedback"><label class="col-lg-3 control-label">邮箱</label><div class="col-lg-9"><input type="text"  data-bv-notempty-message="<i class='fa fa-frown-o'></i> 对不起,邮箱不能为空!" data-bv-notempty="true"      data-bv-regexp-message="<i class='fa fa-frown-o'></i> 对不起,邮箱格式有误!" data-bv-regexp-regexp="^[\w\-\.]+@[\w\-\.]+(\.\w+)+$" data-bv-regexp="true"  name="email" class="form-control" data-bv-field="email" value="" placeholder="电子邮箱"></div></div>
                                         </div>
                                        
                                         
                                         <div style="display:none" id="TypeMobile"> 
                                             <div class="form-group has-feedback"><label class="col-lg-3 control-label">手机号码</label><div class="col-lg-9">
                                             <input type="text"  data-bv-notempty-message="<i class='fa fa-frown-o'></i> 对不起,请输入手机号码！" data-bv-notempty="true"    data-bv-stringlength-message="<i class='fa fa-frown-o'></i> 对不起,请输入手机号码位数有误！" data-bv-stringlength-max="11" data-bv-stringlength-min="11" data-bv-stringlength="true"    data-bv-regexp-message="<i class='fa fa-frown-o'></i> 对不起,请输入手机号码格式有误！" data-bv-regexp-regexp="^(1)[0-9]{10}$" data-bv-regexp="true"  name="mobile" placeholder="手机号码" class="form-control" data-bv-field="mobile" value="">
                                             </div></div>
                                        </div>
                                        
                                        <div class="form-group has-feedback">
                                             <div class="col-lg-offset-3 col-lg-9">
                                              <div id="RegtypeMessage"><span>没有邮箱？</span><a href="#" class="regtype">用手机注册</a></div>
                                             </div>
                                        </div>
                
                                        <div class="form-group has-feedback">
                                             <label class="col-lg-3 control-label">用户名</label>
                                             <div class="col-lg-9">
                                                  <input type="text" name="username" AUTOCOMPLETE="off"  class="form-control">
                                                  <i style="" class="form-control-feedback glyphicon glyphicon-user" data-bv-field="username"></i></div>
                                        </div>
                                     
                                       
                                       
                                        <div class="form-group has-feedback"><label class="col-lg-3 control-label">创建密码</label><div class="col-lg-9"><input type="password" AUTOCOMPLETE="off" data-bv-notempty-message="<i class='fa fa-frown-o'></i> 对不起！请输入创建密码！" data-bv-notempty="true"    data-bv-stringlength-message="<i class='fa fa-frown-o'></i> 对不起！密码格式有误,密码长度小于6位大于32位！" data-bv-stringlength-max="32" data-bv-stringlength-min="6" data-bv-stringlength="true"   data-bv-different-message="<i class='fa fa-frown-o'></i> 对不起！您输入密码不能与用户名相同！" data-bv-different-field="username" data-bv-different="true"   data-bv-regexp-message="<i class='fa fa-frown-o'></i>对不起！请输入英文字母与数字或符号组合！" data-bv-regexp-regexp="^[0-9a-zA-Z\_\@\#$\%\^\&\*\!\~]+$" data-bv-regexp="true"  name="password" class="form-control" data-bv-field="password" value=""></div></div>
                                        
                                        
                                        <div class="form-group has-feedback">
                                             <label class="col-lg-3 control-label">验证密码</label>
                                             <div class="col-lg-9">
                                                  <input type="password" AUTOCOMPLETE="off"  name="confirmPassword" class="form-control">
                                                  <i class="form-control-feedback glyphicon" data-bv-field="confirmPassword"></i> 
                                                  </div>
                                        </div>
                                        
                                        <div class="form-group has-feedback">
                                             <label class="col-lg-3 control-label">密码强度</label>
                                             <div class="col-lg-9">
                                                  <div class="progress progress-bordered">
                                                           <div style="width: 0%" class="progress-bar"></div>
                                                 </div>
                                            </div>
                                        </div>
                                        
                                        {if C('Geetest_Key')}
                                        <div class="form-group has-feedback">
                                             <div class="col-lg-offset-3 col-lg-9" id="ShowSecCode">
                                             {hook VerifyCode}
                                             </div>
                                        </div>
                                        {else}
                                         <div class="form-group has-feedback">
                                            <label class="col-lg-3 control-label">验证码</label>
                                            <div class="col-lg-9">
                                              <input type="text" name="seccode" class="form-control" AUTOCOMPLETE="off" >
                                              <i class="form-control-feedback glyphicon glyphicon-eye-open" data-bv-field="seccode"></i> </div>
                                          </div>
                                          <div class="form-group has-feedback">
                                          <div class="col-lg-offset-3"><div id="ShowSecCode" class="col-lg-9"></div></div>
                                          </div>
                                        <script>
                                    
                                            function seccode(){
                                                 var img='/VerifyCode?rand='+Math.random();
                                                 $('#ShowSecCode').html('<a href="javascript:;" onclick="refreshcode()" style="cursor:hand;" title="点击换一张验证码"><img id="img_seccode" src="'+img+'"></a>');
                                                 $("#SecCode").val("");
                                            }
                                            
                                            function refreshcode() {
                                                
                                                var img = '/VerifyCode?rand='+Math.random();
                                                if(document.getElementById('img_seccode')) {
                                                    $('#img_seccode').attr("src",img);
                                                }
                                            }
                                            
                                            $(function(){
                                            
                                                  seccode();
                                            
                                            });
                                        </script>
                                        {/if}
                                                                            
                                        <div class="form-group has-feedback">
                                                        <div class="checkbox">
                                                            <label class="col-lg-offset-3 col-lg-9">
                                                                <input type="checkbox" checked="checked"  class="inverted" name="agreement">
                                                                <span class="text">同意注册协议.<a href="#">《{echo C('sitename')}注册协议》</a></span>
                                                            </label>
                                                        </div>
                                                    </div>
                                        
                                        <div class="form-group">
                                             <div class="col-lg-offset-3 col-lg-9">
                                                  <button class="btn btn-palegreen btn-lg" type="submit">提交注册</button>
                                             </div>
                                        </div>
                                        
                                        <input type="hidden" name="referer" value=""/>
                                        <input type="hidden" name="datatype" value="json"/>
                                        <input type="hidden" id="RegType" name="regtype" value="email"/>
                                        <input type="hidden" name="Submit" value="true"/>
                                   </form>
                                   
        
                              </div>
                              <div class="col-lg-6">
                                    
                                   <div class="form-title"> <i class="glyphicon glyphicon-th-large"></i> 通过合作网站登录到{echo C('sitename')}</div>
                                   
                                   <p>
                                   <a href="/login/sina" title="新浪微博"><img src="/assets/img/sina_weibo_48.png" /></a>
                                   
                                   <a href="/login/qqweibo" title="QQ微博"><img src="/assets/img/qq_weibo_48.png" /></a>
                                   
                                   </p>  
                                        
                                        
                              </div>
                         </div>
                    </div>
          </div>
     </div>
</div>


<!--Page Related Scripts-->
<script src="{echo AURL}/js/validation/bootstrapValidator.js"></script>

<script>

$(function(){

	 
      $('input[data-bv-field="mobile"]').attr('disabled',true);
	
   	 $(".regtype").click( function () {
		   if($("#RegType").val()=='mobile'){
			   $("#RegType").val('email');
			   $("#TypeMobile").hide();
			   $('input[data-bv-field="mobile"]').attr('disabled',true);
			   $("#TypeEMail").show();
			   $('input[data-bv-field="email"]').attr('disabled',false);
			   $(this).html('用手机注册');
			   $('#RegtypeMessage span').html('没有邮箱？');
			  
		   }else{
			   $("#RegType").val('mobile');
			   $("#TypeEMail").hide();
			   $('input[data-bv-field="email"]').attr('disabled',true);
			   $("#TypeMobile").show();
			   $('input[data-bv-field="mobile"]').attr('disabled',false);
			   $('#RegtypeMessage span').html('没有手机？');
			   $(this).html('用邮箱注册');
		   }
	 });


});
 
        $(document).ready(function () {

 		  $('#registrationForm').bootstrapValidator({
                excluded: [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                submitHandler: function (form) {

				  $.post("{echo U('/get/register/index')}",$("#registrationForm").serialize(), function(json) {
					
					  	$('.bootbox').PhpappProgress({json:json});

				 		return true;
					
				  }, 'json');
				  

				 bootbox.dialog({
					 message: '<div class="progress progress-striped active"><div style="width: 1%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info"><span>0%</span></div></div>',
					 title: '<i class="icon fa fa-retweet"></i> 注册中',
					 closeButton: false
				 }).PhpappProgress({time:1000});
			 
				  return false; 
				 
                }
			 ,
                fields: {
				
				 password:{
					 validators: {
						 callback: {
						    callback: function(value) {
							    //console.log($(".progress-bar").html());
							    if(value.length<10 && value.match(/^[0-9]+$/)){
								    $(".progress-bar").html('密码太简单');
								    $(".progress-bar").css("width","20%");
							    }
							    
							    if(value.length<10 && value.match(/^[a-zA-Z]+$/)){
								    console.log($(".progress-bar").html());
								    $(".progress-bar").html('密码简单');
								    $(".progress-bar").css("width","40%");
							    }
							    
							    if(value.length<10 && value.length>=6 && value.match(/[0-9]{1,20}/) && value.match(/[a-z]{1,20}/i)){
								     $(".progress-bar").html('密码强度一般');
								     $(".progress-bar").css("width","60%");
							    }
							    
							    if(value.length>=10 && value.match(/[0-9]{1,10}/) && value.match(/[a-z]{1,10}/) && value.match(/[A-Z]{1,10}/)){
								     $(".progress-bar").html('密码强度良好');
								     $(".progress-bar").css("width","80%");
							    }
							    
							    if(value.length>=10 && value.match(/[0-9]{1,10}/) && value.match(/[a-z]{1,10}/) && value.match(/[A-Z]{1,10}/) && value.match(/[\_\@\#\$\%\^\&\*\!\~]{1,10}/)){
								     $(".progress-bar").html('密码强度强');
								     $(".progress-bar").css("width","90%");
							    }
							    
							    							    
							    if(value.length>=10 && value.match(/[0-9]{1,10}/) && value.match(/[a-z]{1,10}/) && value.match(/[A-Z]{1,10}/) && value.match(/[\_\@\#\$\%\^\&\*\!\~]{3,10}/)){
								     $(".progress-bar").html('密码强度超强');
								     $(".progress-bar").css("width","100%");
							    }
							
							     return true;
						    }
						}
					 }
				},
						
				confirmPassword:{
					 validators: {
						 notEmpty: {
						    message: '<i class="fa fa-frown-o"></i> 对不起！请输入验证密码！'
						},
						identical: {
						    field: 'password',
						    message: '<i class="fa fa-frown-o"></i> 对不起！您输入验证密码不一致！'
						},
						different: {
						    field: 'username',
						    message: '<i class="fa fa-frown-o"></i> 对不起！您输入密码不能与用户名相同！'
						}
					 }
				},
				/*
				seccode:{
					 validators: {
						 notEmpty: {
						    message: '<i class="fa fa-frown-o"></i> 对不起！请输入验证码！'
						}, stringLength: {
						   min: 4,
						   message: '<i class="fa fa-frown-o"></i> 对不起！验证码小于4位！'
					   }
					 }
				},
				*/
				
				agreement:{
					 validators: {
						 notEmpty: {
						    message: '<i class="fa fa-frown-o"></i> 对不起！您未同意注册协议不能注册！'
						}
					 }
				}
                }
			
            }) 

        });
	   

	   $(function(){
		     $("i[data-bv-field='agreement']").remove();
	   });

    </script>

{template Public:Page:footer}