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

相关文章

来自专栏Java成神之路

Java企业微信开发_12_异常:java.lang.OutOfMemoryError: Java heap space

1.java.lang.OutOfMemoryError: Java heap space解决方法 (有问题咨询加微信)

561
来自专栏安富莱嵌入式技术分享

【安富莱】【RL-TCPnet网络教程】第7章 RL-TCPnet网络协议栈移植(裸机)

本章教程为大家讲解RL-TCPnet网络协议栈的裸机移植方式,学习了上个章节讲解的底层驱动接口函数之后,移植就比较容易了,主要是添加库文件、配置文件和驱动文件即...

673
来自专栏walterlv - 吕毅的博客

项目文件中的已知属性(知道了这些,就不会随便在 csproj 中写死常量啦)

发布于 2018-04-12 13:03 更新于 2018-08...

651
来自专栏Hadoop实操

如何使用StreamSets实时采集Kafka并入库Kudu

1685
来自专栏散尽浮华

Centos7下关于系统用户密码规则-运维笔记

1)密码长度、有效期 /etc/login.defs文件是当创建用户时的一些规划,比如创建用户时,是否需要家目录,UID和GID的范围;用户的期限等等,这个文...

1534
来自专栏FreeBuf

命令行下的“蒙面歌王”rundll32.exe

*本文原创作者:lcx,本文属FreeBuf原创奖励计划,未经许可禁止转载 ** 在Windows系统中,为了节省内存和实现代码重用,微软在Windows操作系...

2049
来自专栏蓝天

GDB高级技巧

难得有雅兴,边动手边记录操作步骤,本文主要示例一些平常较少使用到的GDB功能,掌握这些用法有助于提高GDB调试和解决问题的能力。

541
来自专栏我是攻城师

使用shell分页读取600万+的MySQL数据脚本

3625
来自专栏spring源码深度学习

linux安装redis+设置远程连接(史上最容易)

redis-server -v查看安装的redis版本。我安装的是3.0,这个版本就不错了,如果更新了数据源依然是2.8左右版本,我建议还是用下载压缩包的方式安...

1222
来自专栏颇忒脱的技术博客

远程Debug Java进程的方法

远程debug的意思是启动一个Java进程,启动一个debugger进程,将两者连接起来,利用debugger来debug Java进程。

662

扫码关注云+社区