# 忘記密碼 頁面一
### 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>
```
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包（賬戶）
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd