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

当用户点击修改密码的时候,就弹出一个窗口。这里的弹窗,我们使用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提示:

源码获取:https://www.jianshu.com/p/4977bd0073d5

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏人云亦云

翻译 理解Storm拓扑的并行性

3519
来自专栏企鹅号快讯

Python人工智能之图片识别,Python3一行代码实现图片文字识别

我们以识别诗词为例 下面是我们要识别的图片 ? 先看下效果图 ? 我们运行代码后识别的结果,有几个字没有正确识别,但是大多数字都能识别出来。 一行代码就能识别图...

5446
来自专栏Linux内核

Linux OOM机制分析

oom_killer(out of memory killer)是Linux内核的一种内存管理机制,在系统可用内存较少的情况下,内核为保证系统还能够继续运行下去...

7487
来自专栏吉浦迅科技

【入门篇】一个小白在Jetson TX2上安装caffe的踩坑之旅

作为一个在深度学习上的小白,买Jetson TX2一个很大的原因就是想学习深度学习。那么当用Jetpack刷好板子后,第一个任务肯定是要学着安装caffe!...

55811
来自专栏用户画像

3.4.1 流量控制、可靠传输与滑动窗口机制

流量控制涉及对链路上帧的发送速率的控制,以使接收方有足够的缓冲空间来接受每一个帧。例如,在面向帧的自动重传请求系统中,当待确认帧的数量增加时,有可能超出缓冲存储...

692
来自专栏深度学习自然语言处理

这些进程的后台可靠运行命令你都知道了吗

当用户注销(logout)或者网络断开时,终端会收到 HUP(hangup)信号从而关闭其所有子进程。因此,我们的解决办法就有两种途径:要么让进程忽略 HUP ...

641
来自专栏大数据挖掘DT机器学习

用Python调用百度OCR接口实例

本文主要针对Python开发者,描述百度文字识别接口服务的相关技术内容。OCR接口提供了自然场景下整图文字检测、定位、识别等功能。文字识别的结果可以用于翻译、搜...

7245
来自专栏马洪彪

C#操作EML邮件文件实例(含HTML格式化邮件正文和附件)

使用QQ邮箱、163邮箱等导出的EML邮件,包含了邮件的发件人、主题、内容、附件等所有信息,该实例就如何解析这些信息,并在编辑后保存做个Demo。 如下图所示,...

3656
来自专栏菩提树下的杨过

silverlight:DeepZoom版的图片局部放大效果

先上演示地址: http://images.24city.com/jimmy/DeepZoom/ 步骤: 1.先启动PhotoShop,利用自动等分切片功能把...

1998
来自专栏木宛城主

SharePoint自动化部署,利用SPSD工具包

目录 怎样使用SPSD 配置Environment XML文件 PowerShell激活Feature  上篇博客讲了利用PowerShell导出、导入AD...

2039

扫码关注云+社区