dcloud修改密码mui

本文介绍了一个基于HTML和JavaScript的网页应用实例,用于实现用户的密码修改功能。该应用包括了旧密码、新密码及确认密码的输入验证,并通过AJAX发送修改请求到服务器端。

<!doctype html>

<html>

 

<head>

<meta charset="UTF-8">

<title>修改密码</title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="../../css/mui.min.css" rel="stylesheet" />

 

<style>

.mui-input-group:first-child {

margin-top: 10px;

}

.mui-content-padded {

margin-top: 25px;

}

.mui-btn {

padding: 10px;

}

</style>

</head>

 

<body>

 

 

<header class="mui-bar mui-bar-nav">

    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>

    <h1 class="mui-title">修改密码</h1>

</header>

<div class="mui-content">

    <form class="mui-input-group" id="password_set">

    <div class="mui-input-row">

        <label>旧密码</label>

        <input type="password" id="oldWord" class="mui-input-password" placeholder="请输入旧密码">

    </div>

    <div class="mui-input-row">

        <label>新密码</label>

        <input type="password" id="newWord" class="mui-input-password" placeholder="请输入新密码">

    </div>

    <div class="mui-input-row">

        <label>再次输入</label>

        <input type="password" id="second" class="mui-input-password" placeholder="请再次输入新密码">

    </div>

    

</form>

<div class="mui-content-padded">

<button form="password_set" type="submit" class="mui-btn mui-btn-blue mui-btn-block" id="modify">提 交</button>

</div>

 

</div>

</body>

<script src="../../js/mui.min.js"></script>

<script type="text/javascript">

mui.init();

 

mui(document.body).on('tap', '#modify', function() {

var oldWord = document.getElementById("oldWord").value;

var newWord = document.getElementById("newWord").value;

var second = document.getElementById("second").value;

if(second != newWord){

mui.toast('第二次输入新密码不一致');

}else{

setTimeout(function(){

mui.ajax('http://api.fuapi.com/user/edit-password',{

data:{

access_token:'WyJOdz09IiwiTVRRNE16WTRNakEwT1E9PSIsIk1USTVOakF3TUE9PSJd',

old_password: oldWord,

new_password: newWord

},

dataType:'json',//服务器返回json格式数据

type:'post',//HTTP请求类型

timeout:10000,//超时时间设置为10秒;

//headers:{'Content-Type':'application/json'},

success:function(data){

//console.log(JSON.stringify(data));

if(data.code == 1){

mui.toast('修改成功');

setTimeout(function(){

mui.openWindow({

url:"../login.html",

id:'login',

createNew:true,

show:{

aniShow:'zoom-fade-out',

duration:250

},

waiting:{

autoShow:false

}

});

},500);

}else if(data.code == -1){

mui.toast(data.msg);

}

},

error:function(xhr,type,errorThrown){

mui.toast('系统异常');

}

});

 

}, 500);

}

});

</script>

 

</html>

转载于:https://my.oschina.net/af666/blog/825150

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值