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

相关文章

来自专栏魂祭心

原 canvas绘制clock

4034
来自专栏落花落雨不落叶

canvas画简单电路图

59911
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2697
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4818
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

4688
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2132
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3095
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2625
来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

3985

扫码关注云+社区