【php增删改查实例】第二十七节 - 个人密码修改

剽悍一小兔

发布于 2018-06-13 13:48:43

1.2K0

发布于 2018-06-13 13:48:43

文章被收录于专栏：web编程技术分享web编程技术分享

当用户点击修改密码的时候，就弹出一个窗口。这里的弹窗，我们使用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">&times;</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提示：