后端修改密码的简单弹窗

最新推荐文章于 2024-04-28 11:28:01 发布

春风得意之时

最新推荐文章于 2024-04-28 11:28:01 发布

阅读量6k

点赞数 2

分类专栏： JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/u012513962/article/details/78338341

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

后台的小伙，因为前端的功底不是很好，在做后台时，遇到一个修改的密码的弹窗不会弄，找到我，特意为其写了个demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #updataPwdBox{
                width: 200px;
                height: 200px;
                border: 10px solid cadetblue;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -100px;
                margin-top: -100px;
                display: none;
                z-index: 99999999999;
            }
            #updataPwdBox .udataPwd{
                margin-left:9px;
                margin-top: 10px;
            }
            .btnBox{
                margin:10px auto;
            }
            .close{
                margin-left: 10px;
            }
            .save{
                margin-left: 76px;
            }
        </style>
    </head>
    <body>
        <div id="updata">点击修改密码</div>
        <div class="updataPwdBox" id="updataPwdBox">
            <div class="udataPwd">
                <table for-="username">用户名:</table><input type="text" id="username" />
            </div>
            <div class="udataPwd">
                <table for="oldpwd">旧密码:</table><input type="password" id='oldpwd'/>
            </div>
            <div class="udataPwd">
                <table for="newpwd">新密码:</table><input type="password"  id="newpwd"/>
            </div>
            <div class="btnBox">
                <button class="close" id="close">取消</button>
                <button class="save" id="save">保存</button>
            </div>
        </div>
        <script>
            updata.onclick = function(){
                updataPwdBox.style.display = "block";
            }
            var close = document.getElementById('close');
            var save = document.getElementById('save');
            var username = document.getElementById('username');
            var oldpwd = document.getElementById('oldpwd');
            var newpwd = document.getElementById('newpwd');
            close.onclick = function(e){
                username.value='';
                oldpwd.value='';
                newpwd.value='';
                updataPwdBox.style.display = 'none';
            }
            //保存按钮触发事件
            save.onclick = function(){
                //获取用户名
                var usernameval = username.value;
                console.log('用户名:'+usernameval);
                if(usernameval==''){
                    alert('用户名不能为空');
                    return false;
                }

                //获取旧密码
                var oldpwdval  = oldpwd.value;
                if(oldpwdval==''){
                    alert('旧密码不能为空');
                    return false;
                }
                //获取新密码
                var newpwdval = newpwd.value;
                if(newpwdval==''){
                    alert('新密码不能为空');
                    return false;
                }
                console.log('旧密码:'+oldpwdval);
                console.log('新密码：'+newpwdval);
            }
        </script>
    </body>
</html>

春风得意之时

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
后端修改密码的简单弹窗

后台的小伙，因为前端的功底不是很好，在做后台时，遇到一个修改的密码的弹窗不会弄，找到我，特意为其写了个demo<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #updataPwdBox{
复制链接

扫一扫