【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 条评论
登录 后参与评论

相关文章

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

用Python调用百度OCR接口实例

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

9175
来自专栏云霄雨霁

数据链路层协议ARQ

1940
来自专栏linjinhe的专栏

LevelDB:整体架构

上图简单展示了 LevelDB 的整体架构。LevelDB 的静态结构主要由六个部分组成:

3723
来自专栏用户画像

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

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

822
来自专栏散尽浮华

linux下安装php的imagick扩展模块(附php升级脚本)

imagick是一个PHP的扩展,是一套软件系列,用ImageMagick提供的API来进行图片的创建与修改,不过这些操作已经包装到扩展imagick中去了,最...

3258
来自专栏计算机视觉life

OpenCV学习入门(二):Image Watch神器

Image Watch是在visual studio 2012及以上版本上使用的一款OpenCV工具,能够在调试过程中实时显示内存中矩阵Mat(存放图像,数组等...

2195
来自专栏python学习之旅

Python网络爬虫笔记(四):使用selenium获取动态加载的内容

(一)  说明 上一篇只能下载一页的数据,第2、3、4....100页的数据没法获取,在上一篇的基础上修改了下,使用selenium去获取所有页的href属性值...

4456
来自专栏马洪彪

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

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

4056
来自专栏企鹅号快讯

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

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

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

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

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

751

扫码关注云+社区

领取腾讯云代金券