registerMobile.ejs 14.3 KB
<!DOCTYPE html>
<html>
  <head>
    <title> 企飞</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <link rel="stylesheet" type="text/css" href="/css/core.css" /> 
  	<style>
      img{max-width: 100%; height: auto;}
      #registerTitle{
        padding-bottom:10px;/*
        border-bottom: 1px solid #e8e8e9;*/
      }
      h2{
        font-size: 18px; 
        margin-top: 10px;
        margin-bottom: 5px;
      }
      .row{
        margin-left:0px;
        margin-right: 0px;
      }
      .row>div{
        padding:0px;
      }
      #logoImg{
        width:auto;
        display:inline-block;
      }
      #allDiv{
        height:auto;
        margin-bottom: 15px;
      }
      .allInput{
        box-shadow: none;
        border:none;
        border-bottom: 1px solid #e8e8e9;
        border-radius: 0px;
        font-size:15px;
        color:#333;
        padding:3px 0px;
      }
      .allInput.form-control:focus{
        box-shadow: none;
      } 
      .allInput::-webkit-input-placeholder{
        color:#ccc;
      } 
      .allInput::-moz-placeholder{
        color:#ccc;
      }
      .allInput::-ms-placeholder{
        color:#ccc;
      }
      .nameInput{
        position:relative;
      }
      .inputValue{
        position: absolute;
        top: 40px;
        font-size: 20px;
        right: 0px;
      }
      #codesBtn{
        width:100px;
        border:none;
        background-color: transparent;
        font-size: 15px;
        color:#28b47e;
        position:absolute;
        top:0px;
        right:0px;
      }
      label{
        color:#999;
        font-weight:normal;
        font-size:15px;
        margin-bottom:0px;
      }
		  #registerBtn{
        width:100%;
        height: 40px;
        font-size:20px;
        color:#fff;
        background-color:#28b47e;
        border-radius:30px;
      }
      #registerBtn:focus{
        outline:none;
      } 
      .help-block{
        font-size: 12px;
        margin-top: 2px;
        margin-bottom: 5px;
      }
  	</style> 
    <script type="text/javascript" src="/js/zepto.min.js"></script> 
    <script type="text/javascript" src="/js/event.js"></script> 
    <script type="text/javascript" src="/js/touch.js"></script> 
  </head>
  <body>  
    <div class="container" >
       <div class="row">
          <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 text-center">
            <h2 id="registerTitle">快人HR账号注册</h2> 
          </div>
       </div>
       <div class="row">
          <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
           <div id="ff">
              <div id="allDiv" class="form-group"><!--
                <label  class="control-label" for="name">企业账号</label>-->
                <input type="text" class="form-control allInput nameInput" id="name" placeholder="企业账号"> 
                <label id="nameValidate" class="help-block">必须以小写字母开头,3~18位数字和小写字母组合</label>
              </div>
              <div id="allDiv" class="form-group"><!--
                <label  class="control-label" for="companyName">公司名</label>-->
                <input type="text" class="form-control allInput company_nameInput" id="companyName" placeholder="公司全称">
                <label id="company_nameValidate" class="help-block"></label>
              </div>
              <div id="allDiv" class="form-group"><!--
                <label  class="control-label" for="contacts">联系人</label>-->
                <input type="text" class="form-control allInput contact_nameInput" id="contacts" placeholder="联系人">
                <label id="contact_nameValidate" class="help-block"></label>
              </div>
              <div id="allDiv" class="form-group"><!--
                <label  class="control-label" for="tel">手机号码</label>-->
                <input type="tel" class="form-control allInput telInput" id="tel" placeholder="手机号">
                <label id="telValidate" class="help-block"></label>
              </div>
              <div id="allDiv" style="position:relative" class="form-group"><!--
                <label  class="control-label" for="registerCodes">验证码</label>-->
                <input type="text" class="form-control allInput codeInput" id="registerCodes" placeholder="验证码">
                <button id="codesBtn" class="btn btn-default">获取验证码</button>
                <label id="codeValidate"></label>
              </div>
              <div id="allDiv" style="margin-bottom:20px" class="form-group"><!--
                <label  class="control-label" for="password">登录密码</label>-->
                <input type="password" class="form-control allInput passwordInput" id="password" placeholder="密码长度不少于8位,不大于16位">
                <label id="passwordValidate"></label>
              </div>
               <div id="allDiv" class="form-group">
                  <input id="registerBtn" type="submit" value="注册">
              </div>
            </div>
          </div>
      </div>
    </div>   
    <script>   
        (function($){   
            var codeFlag=false;
            var id_time=null;
            function codeValidateFun(values){
              var flagValidate=true;
              if(!values.account){
                $('#nameValidate').html('企业账号是必填项').css('color','red');
                flagValidate=false; 
              }else if(!/^[a-z][a-z0-9]{2,17}$/g.test(values.account)){
                $('#nameValidate').html('企业账号必须是小写字母开头,只能是数字和小写字母,长度3~18位').css('color','red');
                flagValidate=false;
              }
              if(!values.contact_mobile){
                $('#telValidate').html('手机号是必填项').css('color','red');
                flagValidate=false;
              }else if(!/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test(values.contact_mobile)){
                $('#telValidate').html('请输入正确的手机号码').css('color','red');
                flagValidate=false;
              }
              return flagValidate;
            }
            function validateFun(values){
              var flag=true; 
              if(!values.account){
                $('#nameValidate').html('企业账号是必填项').css('color','red');
                flag=false;

              }else if(!/^[a-z][a-z0-9]{2,17}$/g.test(values.account)){
                $('#nameValidate').html('企业账号必须是小写字母开头,只能是数字和小写字母,长度3~18位').css('color','red');;
                flag=false;
              }
              if(!values.company_name){
                $('#company_nameValidate').html('公司名称是必填项').css('color','red');
                flag=false;
              }
              if(!values.contact_name){
                $('#contact_nameValidate').html('联系人名称是必填项').css('color','red');
                flag=false;
              }
              if(!values.contact_mobile){
                $('#telValidate').html('手机号是必填项').css('color','red');
                flag=false;
              }else if(!/^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$/i.test(values.contact_mobile)){
                $('#telValidate').html('请输入正确的手机号码').css('color','red');
                flag=false;
              }
              if(!values.code){
                $('#codeValidate').html('验证码是必填项').css('color','red');
                flag=false;
              }
              if(!values.password){
                $('#passwordValidate').html('密码是必填项').css('color','red');
                flag=false;
              }else if(!/^[0-9a-zA-Z]+$/i.test(values.password)){
                $('#passwordValidate').html('密码必须是数字或字母').css('color','red');
                flag=false;
              }else if(values.password.length<8||values.password.length>16){
                $('#passwordValidate').html('密码长度不少于8位,不大于16位').css('color','red');
                flag=false;
              }
              return flag;
            }
            function getVlaues(){
              var account=$('#name').val();
              var company_name=$('#companyName').val();
              var contact_name=$('#contacts').val();
              var contact_mobile=$('#tel').val();
              var code=$('#registerCodes').val();
              var password=$('#password').val(); 
              return { 
                'account':account,
                'code':code,
                'company_name':company_name,
                'contact_mobile':contact_mobile,
                'contact_name':contact_name,
                'password':password
              }
            }
            function sendRegisterMeg(){
              var values=getVlaues();
              console.log(values);
              if(validateFun(values)){
                $.ajax({
                    type: "POST",
                    url: "/tenants",
                    contentType: 'application/json',
                    data: JSON.stringify(values),
                    success: function(msg){
                      console.log(msg);
                      if(msg&&msg.uuid){
                        document.location.href='/mobileRegisterSuccess';
                      }else{
                        return msg.message=='您的专属域名已被占用,请重新输入您的专属域名'?
                        $('#nameValidate').html(msg.message).css('color','red'):
                        $('#codeValidate').html(msg.message).css('color','red');
                      }
                    }
                });
              }
            }
            function sendMsgCode(){
              var values=getVlaues(); 
              console.log(values);
              values.mobile=values.contact_mobile;
              if(codeValidateFun(values)){
                $.ajax({
                    type: "POST",
                    url: "/smsVerification",
                    contentType: 'application/json',
                    data: JSON.stringify(values),
                    success: function(msg){
                      console.log(msg);
                      if(msg&&msg.code=='200'){
                        codeFlag=true;
                        $('#codesBtn').addClass('disable').css({backgroundColor:'#e8e8e9',color:'#333'});
                        resendCode(60);
                      }else{
                        codeFlag=false;
                        $('#codesBtn').html('获取验证码').css({backgroundColor:'transparent',color:'#28b47e'});
                        $('#codesBtn').removeClass('disable');
                        if(id_time)
                          clearTimeout(id_time);
                        $('#codeValidate').html('验证码获取失败!').css('color','red');
                      }
                    }
                });
              }else{
                codeFlag=false;
                  $('#codesBtn').html('获取验证码').css({backgroundColor:'transparent',color:'#28b47e'});
                  $('#codesBtn').removeClass('disable');
                  if(id_time)
                    clearTimeout(id_time);
              }
            }
            function resendCode(time){
                if(time<0){
                  codeFlag=false;
                  $('#codesBtn').html('获取验证码').css({backgroundColor:'transparent',color:'#28b47e'});
                  $('#codesBtn').removeClass('disable');
                }else{
                  $('#codesBtn').html(time);
                  id_time=setTimeout(function(){
                    resendCode(time-1);
                  },1000)
                }  
            }
            $('#registerBtn').tap(function(event){ 
               event.preventDefault() 
                sendRegisterMeg(); 
            }); 
            $('#codesBtn').tap(function(event){ 
               event.preventDefault() 
                if(codeFlag)
                  return;
                sendMsgCode(); 
                // if(!codeFlag){//'获取验证码'!=$('#codesBtn').html()
                //   return;
                // }else{
                //     codeFlag=true;
                //    $('#codesBtn').addClass('disable').css({backgroundColor:'#e8e8e9',color:'#333'});
                //    resendCode(60);
                // }
            }); 
            $('.nameInput').change(function(){
              $('#nameValidate').html('');
            });
            $('.company_nameInput').change(function(){
              $('#company_nameValidate').html('');
            });
            $('.contact_nameInput').change(function(){
              $('#contact_nameValidate').html('');
            });
            $('.telInput').change(function(){
              $('#telValidate').html('');
            });
            $('.codeInput').change(function(){
              $('#codeValidate').html('');
            });
            $('.passwordInput').change(function(){
              $('#passwordValidate').html('');
            });
            function is_weixin() {
                var ua = navigator.userAgent.toLowerCase();
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    return true;
                } else {
                    return false;
                }
            }
            var isWeixin = is_weixin();
            var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;
            var weixinTip = $('<div id="weixinTip"><p><img src="./img/live_weixin.png" alt="微信打开"/></p></div>');
            
            if(isWeixin){
              $("body").append(weixinTip);
            }
            $("#weixinTip").css({
              "position":"fixed",
              "left":"0",
              "top":"0",
              "height":winHeight,
              "width":"100%",
              "z-index":"1000",
              "background-color":"rgba(0,0,0,0.8)",
              "filter":"alpha(opacity=80)",
            });
            $("#weixinTip p").css({
              "text-align":"center",
              "margin-top":"10%",
              "padding-left":"5%",
              "padding-right":"5%"
            });
          })(Zepto); 
    </script>
  </body>
</html>