ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 忘记密码 页面一 ![](https://box.kancloud.cn/2016-08-25_57bec2cfafb28.png) ### retrievePass_win.html ``` <!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-win.css" /> </head> <body> <header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header"> <a class="aui-pull-left" tapmode onclick="closeWin()"> <span class="aui-iconfont aui-icon-left"></span> </a> <div class="aui-title">找回密码</div> </header> </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript"> function closeWin(){ api.closeWin(); } apiready = function(){ api.parseTapmode(); //fixstart api.setStatusBarStyle({ style : 'light', color: '#01b980' }); var header = document.querySelector('header'); $api.fixIos7Bar(header); $api.fixStatusBar(header); //fixend var headerPos = $api.offset(header); var tab = $api.byId('tab'); var tabPos = $api.offset(tab); var body_h = $api.offset($api.dom('body')).h; api.openFrameGroup ({ name: 'retrievePass', scrollEnabled:false, rect:{x:0, y:headerPos.h, w:'auto', h:body_h - headerPos.h}, index:0, frames: [{ name: 'retrievePass1_frm', url: 'retrievePass1_frm.html', bounces:false, vScrollBarEnabled: false, hScrollBarEnabled: false },{ name: 'retrievePass2_frm', url: 'retrievePass2_frm.html', bounces:false, vScrollBarEnabled: false, hScrollBarEnabled: false }] }, function(ret, err){ var name = ret.name; var index = ret.index; }); }; </script> </html> ``` ### retrievePass1_frm.html ``` <!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>找回密码1</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> </head> <style type="text/css"> body { height: auto; } .aui-card { margin-top: 15px; } .aui-input-addon.aui-iconfont { font-size: 20px; } </style> <body> <div class="aui-content aui-card aui-noborder"> <div class="aui-form"> <div class="aui-input-row"> <i class="aui-input-addon aui-iconfont aui-icon-mobilefill aui-text-default"></i> <input type="text" id="mobile" class="aui-input" placeholder="请输入您的手机号"/> </div> <div class="aui-input-row"> <input type="number" class="aui-input" id="code" placeholder="请输入收到的验证码"/> <span class="aui-input-addon"> <div class="aui-btn" id="sendVerify" status="1" tapmode onclick="verification()"> 获取验证码 </div> </span> </div> <div class="aui-btn-row" tapmode onclick="setGroupIndex()"> <div class="aui-btn aui-btn-block aui-btn-primary" > 下一步 </div> </div> </div> </body> <script type="text/javascript" src="../../script/api.js" ></script> <script type="text/javascript"> //验证电话号码是否合法 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 verification(){ //短信发送 var cellphone = $api.byId('mobile').value; //获取输入的电话号码 if(! isNumber(cellphone)) { alert("您的电话号码不合法!"); $api.byId('mobile').focus(); return; } if ($api.byId('mobile').value.length == 0) { alert("请输入您账号!"); $api.byId('mobile').focus(); return; } api.ajax({ url: 'http://www.dakaifa.net/index.php?g=App&m=Reg&a=judge', method: 'post', data: { values: { name: cellphone } } },function(ret, err) { if (ret) { //判断是否有该用户存在 if(ret.msg == 0){ alert('不存在此账户 请重新输入'); }else{ var smsVerify = api.require('smsVerify'); smsVerify.sms({ phone:cellphone, country:"86" },function(ret, err){ if(ret.status){ alert('发送成功,注意查收短信'); }else{ api.alert({msg: err.code+' '+err.msg}); } }); } } else { alert('不存在此账户,请重新输入'); }; }); } function setGroupIndex() { //点击下一步时 验证短信验证码是否正确 if ($api.byId('mobile').value.length == 0) { alert("手机号不能为空"); $api.byId('mobile').focus(); return; } if ($api.byId('code').value.length == 0) { alert("验证码不能为空"); $api.byId('code').focus(); return; } var cellphone = $api.byId('mobile').value; $api.setStorage('moblie', cellphone); var vcode = $api.byId('code').value; var smsVerify = api.require('smsVerify'); smsVerify.verify({ phone:cellphone, code:vcode },function(ret, err){ if(ret.status){ //验证成功时打开新的窗口 $api.setStorage('moblie', cellphone); api.setFrameGroupIndex({ name : 'retrievePass', index : 1, scroll : true }); }else{ api.alert({msg: err.code+' '+err.msg}); } }); api.setFrameGroupIndex({ name : 'retrievePass', index : 1, scroll : true }); } var smsVerify = null; apiready = function() { api.parseTapmode(); smsVerify = api.require('smsVerify'); // 初始化 register(); } function register() { smsVerify.register(function(ret, err) { if (ret.status) { //api.alert({msg: '注册成功'}); console.log('注册成功'); } else { api.alert({ msg : err.code + ' 注册失败' }); } }); } </script> </html> ``` ### retrievePass2_frm.html ``` <!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>找回密码2</title> <link rel="stylesheet" type="text/css" href="../../css/aui.css" /> </head> <style type="text/css"> body { height: auto; } .aui-card { margin-top: 15px; } .aui-input-addon.aui-iconfont { font-size: 20px; } </style> <body> <div class="aui-content aui-card aui-noborder"> <div class="aui-form"> <div class="aui-input-row"> <span class="aui-input-addon">输入密码</span> <input type="password" id="mobile" class="aui-input" placeholder="6-10个字符,区分大小写"/> </div> <div class="aui-input-row"> <span class="aui-input-addon">确认密码</span> <input type="password" id="again_mobile" class="aui-input" placeholder="请再次输入您的密码"/> </div> <div class="aui-btn-row" tapmode onclick="confirm()"> <div class="aui-btn aui-btn-block aui-btn-primary" > 确定 </div> </div> </div> </body> <script type="text/javascript" src="../../script/api.js" ></script> <script type="text/javascript"> apiready = function() { } function confirm() { var mobile = $api.byId('mobile').value; var again_mobile = $api.byId('again_mobile').value; if ( mobile != again_mobile) { alert("两次密码不一致,请重新输入"); return; }else{ var phone = $api.getStorage('moblie'); api.ajax({ url: 'http://www.dakaifa.net/index.php?g=App&m=Reg&a=retrievepwd', method: 'post', data: { values: { name: phone, password: mobile } } },function(ret, err){ if (ret) { if (ret.msg == '1') { alert('修改成功'); $api.clearStorage (); api.openWin({ name: 'login', url: './login.html', slidBackEnabled : false }); }else{ alert('修改失败'); $api.clearStorage (); api.openWin({ name: 'login', url: './login.html', slidBackEnabled : false }); } }else{ alert(修改失败); } }); } // api.closeWin({ // }); } </script> </html> ```