密码的修改（首先获取该用户的id,原密码判断是否一致，新密码和再次输入密码判断是否一样）...-CSDN博客

用到了layer插件，https://layer.layui.com/ 在该连接下下载layer相关文件

例子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>密码修改</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="format-detection" content="telephone=no, email=no">
    </head>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/layer.css" />
    <link rel="stylesheet" href="css/changePassword.css" />
    <body>
        <nav>
            <div class="navs">
                <div class="perss nleftimg">
                    <a href="modifyPassword.html"><img src="images/back.png"  /></a>
                </div>
                <div class="perss personal">
                    <h1>修改密码</h1>
                </div>
                <div class="perss nrightimg"></div>
            </div>
        </nav>
        <center>
            <div class="center">
                <form action="" method="post" class="loginform" enctype="multipart/form-data" name="biaodan">
                    <div class="passwannpas">
                        <h4>原密码</h4>
                    </div>
                    <div class="passwannpas">
                        <input type="password" class="passwords" id="inputPassword" />
                    </div>
                    <div class="passwannpas">
                        <h4>新密码</h4>
                    </div>
                    <div class="passwannpas">
                        <input type="password" class="newspassword" />
                    </div>
                    <div class="passwannpas">
                        <h4>确认密码</h4>
                    </div>
                    <div class="passwannpas">
                        <input type="password" class="aginpassword" />
                    </div>
                </form>
                <div class="passwordbuttn">
                    <input type="button" value="完 成" class="passinbut"/>
                </div>
            </div>
        </center>
    </body>
    <script type="text/javascript" src="js/rem.js" ></script>
    <script type="text/javascript" src="../bootstrap/js/jquery-2.1.1.min.js" ></script>
    <script type="text/javascript" src="../bootstrap/js/layer.js" ></script>
    <script type="text/javascript" src="js/changePassword.js" ></script>
</html>

js:

$(function (){
    $(".passinbut").click(function(){
        var id=getCookie("id");
        var password=$(".aginpassword").val();
        var ypassword=$("#inputPassword").val();
        var npassword=$(".newspassword").val();
        if(password=='' || password==null && ypassword=='' || ypassword==null && npassword=='' || npassword==null){
            layer.msg('密码不能为空');
        }else{
            oldPassword(id,ypassword)
        }
        
    });
})

//原码判断
function oldPassword(id,ypassword){
        $.ajax({
            url:"/hospitalmanage/user/getuserpas.do",
            type:"post",
            dataType:"json",
            data:{
                "id":id,
                "password":ypassword
            },
            success:function(data){
                console.log(data)
                if(data.data==true){
                    passSubmission();
                }else{
                    layer.msg('原密码有误');
                    return
                }
                
            }
        });
}

//新码判断
function passSubmission(){
    var id=getCookie("id");
    var password=$(".aginpassword").val();
    var npassword=$(".newspassword").val();
     if(password != npassword){
        layer.msg('两次密码输入不一致！');
        return;
    }else{
        loadingSubmission(id,password);
    }
}
function loadingSubmission(id,password){
    $.ajax({
        url:"/hospitalmanage/user/alertpas.do",
        type:"post",
        dataType:"json",
        data:{
            "num":id,
            "password":password
        },
        success:function(data){
            if(data.state==0){
                layer.confirm('密码修改成功', {
                      btn: ['确定'] //按钮
                    }, function(){
                        window.history.back(-1);
                    });
                $(".aginpassword").val("");
                $(".newspassword").val("");
                $("#inputPassword").val("");
            }else{
                layer.msg('密码修改失败');
            }
        }
    });
}

css:

center{
    width: 100%;
    height:100%;
    background: white;
    padding-top: 1rem;
}
.center{
    width: 7.5rem;
    height: 100%;
    margin:0 auto;
}
.loginform{
    margin:0 0.4rem;
}
.login{
    height: 1.5rem;
    display: -webkit-flex;
    display: flex;
      align-items: center;
}
.login h1{
    font-size: 0.5rem;
    font-weight: bolder;
}
.passwannpas{
    display: -webkit-flex;
    display: flex;
      align-items: center;
      
}
.passwannpas h4{
    font-size: 0.3rem;
    color:#999999;
    margin: 0.7rem 0  0 0;
}
.passwannpas input{
    width: 8.94rem;
    padding: 0.15rem;
    height: 0.30rem;
    font-size: 0.3rem;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom:0.01rem solid #e1e1e1;
}
.passwordbuttn{
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    margin-top: 1.5rem;
    width:7.5rem;
}
.passinbut{
    width: 6.70rem;
    height: 0.67rem;
    background: white;
    border: 0.01rem solid #00a09d;
    color: #00a09d;
    font-size: 0.3rem;
    margin:0 auto;
}