当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用bootstrap提供的javascript插件。(modal)
我们就使用这个模态窗口。
模态窗口的代码:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">修改密码</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">还是算了</button>
<button type="button" class="btn btn-primary">我一定要修改</button>
</div>
</div>
</div>
</div>
在这个模态窗口中,找到class为 modal-body 的div,在这个div中,填上如下代码:
<div class="form-group">
<label >请输入原密码:</label>
<input id="oldPassword" type="password" class="form-control" placeholder="" value="">
</div>
<div class="form-group">
<label>请输入新密码:</label>
<input id="newPassword" type="password" class="form-control" placeholder="" value="">
</div>
<div class="form-group">
<label for="disabledTextInput">请再次输入新密码:</label>
<input id="newPassword2" type="password" class="form-control" placeholder="" value="">
</div>
效果:
我们的设计思路是:先判断是否为空,然后再判断两次的新密码是否一致? 接着,去数据库查询原密码是否正确?如果正确,就允许修改,把新密码经过MD5加密后存入数据库。
现在吗,我们先给确认按钮添加一个点击事件:
function modifyPassword(){
//判断原密码是否为空
var oldPassword = $("#oldPassword").val();
//判断两次输入的密码是否为空
var newPassword = $("#newPassword").val();
var newPassword2 = $("#newPassword2").val();
if(!oldPassword){
alert("原密码为必填项!");
return;
}
if(!newPassword){
alert("新密码为必填项!");
return;
}
if(!newPassword2){
alert("再次确认新密码为必填项!");
return;
}
//判断两次输入的新密码是否一致?
if(newPassword != newPassword2){
alert("两次输入的新密码不一致!");
return;
}
//判断原密码是否正确?
$.post("user/validatePassword.php",{oldPassword:oldPassword},function(data){
if(data.errCode < 0){
alert(data.errMsg);
return;
}else{
alert("密码修改成功!");
//关闭模态窗口
$("#myModal").modal('hide');
}
},"json");
}
24.1 后台程序 文件地址:
<?php
$resultData = array();
$resultData["errCode"] = 0;
$resultData["errMsg"] = "";
//连接MySQL数据库
$conn = mysql_connect("localhost","root","");
$db = mysql_select_db("test",$conn);
mysql_query("set names utf8");
//获取前台传过来的原密码
$oldPassword = $_POST["oldPassword"];
session_start();
$username = $_SESSION["username"];
$sql = "select password from tm_users where username = '$username'";
$rs = mysql_query($sql) or die(err());
while($row = mysql_fetch_array($rs)){
$password = $row["password"];
//对前台传递过来的密码进行MD5加密,再去和数据库里面的密码进行比较
$oldPassword = md5($oldPassword);
if($password != $oldPassword){
$resultData["errCode"] = -1;
$resultData["errMsg"] = "原密码输入错误!";
echo json_encode($resultData);
}else{
echo json_encode($resultData);
}
}
function err(){
$resultData[errCode] = -1;
$resultData[errMsg] = mysql_error();
echo json_encode($resultData);
}
?>
24.2 保存新密码
接下来,修改密码的话,传递到后台的参数需要增加一个新密码。
后台接收:
24.3 美化错误信息
为了更好的用户体验,我们不妨取消alert提示,改用bootstrap给我们提供的警告框来做。
效果:
先在修改密码的弹出层底部加上两个div,分别提示错误信息和正确信息:
<div class="modal-body">
<div class="form-group">
<label >请输入原密码:</label>
<input id="oldPassword" type="password" class="form-control" placeholder="" value="">
</div>
<div class="form-group">
<label>请输入新密码:</label>
<input id="newPassword" type="password" class="form-control" placeholder="" value="">
</div>
<div class="form-group">
<label for="disabledTextInput">请再次输入新密码:</label>
<input id="newPassword2" type="password" class="form-control" placeholder="" value="">
</div>
<div id="errorInfo"></div>
<div id="successInfo"></div>
</div>
然后,编写JS代码:
这两个方法是设置错误和正确信息。
function setErr(msg){
$("#errorInfo").html("<div class=\"alert alert-danger\" role=\"alert\">"+msg+"</div>");
}
function setMsg(msg){
$("#successInfo").html("<div class=\"alert alert-success\" role=\"alert\">"+msg+"</div>");
}
更正之前的alert提示: