登录页面二 · APP模块

# 登录页面二 ![](https://box.kancloud.cn/2016-08-25_57bec2cf89fc6.png) 代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <title>登陆页面</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>  <style> .aui-bar { background: #01b980; color: #ffffff; } .basic-info { margin-top: 15px; } .login { margin-top: 15px; } .text { margin-right: 10px; } .spliter { color: #bbb; padding: 0px 8px; } </style> </head> <body> <header class="aui-bar aui-bar-nav" id="aui-header"> <a class="aui-pull-left" >  </a> <div class="aui-title">登陆</div> </header> <div class="aui-content basic-info"> <div class="aui-form"> <div class="aui-input-row"> <span class="aui-input-addon">   账号</span> <input type="text" class="aui-input" placeholder="请输入手机号" id="name"/> </div> <div class="aui-input-row"> <span class="aui-input-addon">   密码</span> <input type="password" class="aui-input" placeholder="请输入密码" id="password"/> </div> </div> <div class="aui-content-padded login"> <div class="aui-btn aui-btn-block aui-btn-primary" tapmode onclick="dl()"> 登陆 </div> </div> </div> <div class='aui-conten-padded aui-text-center'> <span class='aui-text-success text' tapmode onclick="openReg()">注册账号</span> <span class="spliter">|</span> <span class='aui-text-success text' tapmode onclick="forgetPassword()">忘记密码</span> </div> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> apiready = function() { api.parseTapmode(); //fixstart api.setStatusBarStyle({ style : 'light', color: '#01b980' }); var header = document.querySelector('header'); $api.fixIos7Bar(header); $api.fixStatusBar(header); api.addEventListener({ name : 'keyback', }, function(ret, err) { api.closeWidget(); }); //fixend } function closeWin() { api.closeWin(); } function openReg() { api.openWin({ name : 'reg1', url : 'register1_win.html', slidBackEnabled : false }); } function forgetPassword() { api.openWin({ name : 'retrievePass_win', url : 'retrievePass_win.html', slidBackEnabled : false }); } function isNumber(String) { var Letters = "1234567890"; //可以自己增加可输入值 var i; var c; if (String.charAt(0) == '-') return false; if (String.charAt(String.length - 1) == '-') return false; for ( i = 0; i < String.length; i++) { c = String.charAt(i); if (Letters.indexOf(c) < 0) return false; } return true; } //登录及验证 function dl() { var name = $api.byId('name').value; var password = $api.byId('password').value; if (! isNumber($api.byId('name').value)) { alert("您的电话号码不合法！"); $api.byId('name').focus(); return; } if ($api.byId('name').value.length == 0) { alert("请输入您姓名!"); $api.byId('name').focus(); return; } if ($api.byId('password').value.length == 0) { alert("请输入您密码!"); $api.byId('password').focus(); return; } api.ajax({ url : 'http://www.dakaifa.net/index.php?g=App&m=Login&a=index', method : 'post', cache : 'false', timeout : '30', dataType : 'json', charset : 'utf-8', data : { values : { name : $api.trimAll(name), password : $api.trimAll(password) } } }, function(ret, err) { if (ret) { if (ret.msg == 1) { api.openWin({ name : 'shouye', url : '../main.html', slidBackEnabled : false }); //存入用户信息 $api.setStorage('user', ret); } else { alert('账号或密码错误！'); } } else { api.alert({ msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode) }); }; }); } </script> </html> ```