登机牌认证Demo

<style>
body{
  background-color:#fff;
}
.auth-tab-wrapper{
  height:70px;
}
#sms-tab,#boarding-tab{
  float:left;
  height:60px;
  padding-top:10px;
  width:50%;
  background-color:#fff;
  text-align:center;
  font-family:'微软雅黑';
}
#boarding-tab{
  background-color:#5fd7f6;
}
.phoneBox{
 margin:10px 0 0 10%;
 height:40px;
 width:80%;
}
#phoneNumID{
  height:40px;
  width:60%;
}
.sms-btn{
  height:40px;
  width:35%;
}
#passwordID{
  margin:10px 10% 0 10%;
  height:40px;
  width:80%;
}
.sms-sub{
  margin:10px 10% 0 10%;
  width:80%;
  height:40px;
}
.auth-content-wrapper{
  padding-top:10px;
}

#boarding-content{
  display:none;
}
table,tr,td{
  border:0;
}
#boarding-content table{
  width:90%;
  margin:0 auto;
  font-family:'微软雅黑';
  font-size:12px;
}
#boarding-content input[type=text]{
  margin:3px 0;
  height:40px;
  width:100%;
}
#boarding-content input[type=button]{
  margin-top:3px;
  height:40px;
  width:100%;
}
#second-page{
  display:none;
}


</style>


<div id="first-page">

  <!--滚动图片需要按照下面的html代码构建-->
  <div id="html-slider" class="swipe">
    <div class="swipe-wrap">
     <div><img class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226800258.jpg" /></div>
    <div><img  class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226803744.jpg" /></div>
    <div><img  class='swipe-img' src="http://172.24.128.187/ngProxy//images/uqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150602/1433226825527.jpg" /></div>
    </div>
  </div>
  

  <div class="auth-box">
      <div class="auth-tab-wrapper">
         <div id="sms-tab" onclick="showAuthContent('sms')">短信认证<br/>SMS Auth</div>
         <div id="boarding-tab" onclick="showAuthContent('boarding')">登机牌认证<br/>Bording Pass Auth</div>
      </div>
      <div class="auth-content-wrapper">
         <div id="sms-content">
             <div class='phoneBox'>
             <input id="phoneNumID" type="text" placeholder='请输入手机号' />
             <input class="sms-btn" type="button" onclick="sendMessage()" value="获取验证码" />
             </div>
             <input id="passwordID" type="password" placeholder='请输入验证码'/><br/>
             <input class="sms-sub" type="button" onclick="authOnline(1)" value="认证上网" />
         </div>
         <div id="boarding-content">
             <table>
                <tr><td>证件号/POSSPORT：</td>
                     <td><input type="text"id="boarding-certificateNo" /></td></tr>
                <tr><td>航班号/FLIGHT：</td>
                     <td> <input type="text" id="boarding-flyNo"/></td></tr>
                <tr><td> 座位号/SEAT：</td>
                     <td><input type="text" id="boarding-userName"/></td></tr>
                <tr><td colspan='2'>
 <input type="button" value="登机牌认证/Bording Pass Auth" onclick="authOnline(7)"/></td></tr>
             </table>          
            
         </div>
      </div>
  </div>
</div>    

<div id="second-page">
    <img src="http://172.24.128.187/ngProxy//imagesuqJJVuTVVDRdTEvKEKcQxcRdJRvHpBFy/20150519/1432029502296.jpg" width="100%"/>

</div>    


<script>

function showAuthContent(type){
   if('sms'==type){
     $('#sms-tab').css('background-color','#fff');
     $('#boarding-tab').css('background-color','#5fd7f6');
     $('#sms-content').show();
     $('#boarding-content').hide();
   }else if('boarding'==type){
     $('#sms-tab').css('background-color','#5fd7f6');
     $('#boarding-tab').css('background-color','#fff');     
     $('#sms-content').hide();
     $('#boarding-content').show();
   }
}


function sendMessage(){
    var result = sendSMS("#phoneNumID");
    if(result=='succ'){
        alert("短信发送成功！");
    }else if(result=='fail'){
        alert("短信发送失败！");
    }
} 

//认证上网函数
function authOnline(type){
  var result;    
  if(1==type){
    //短信认证
    result = authenticate(1, '#phoneNumID', '#passwordID');    
  }else if(7==type){
    //登机牌认证
    result = authenticate(7,'#boarding-userName','#boarding-certificateNo','#boarding-flyNo');    
  }else{
    //这个判断分支必须存在，不能删除
    result = authenticate();
  }
  if(result == 'succ'){
    //这里可以编写任意认证上网成功的页面效果，例如：
    $('#first-page').hide();
    $('#second-page').show();
  }else if(result == 'fail'){
    //这里可以编写任意认证上网失败的页面效果，例如：
    alert("用户名和密码错误");
  }
}

</script>