一份修改layui自定义验证信息的修改密码功能

最新推荐文章于 2022-07-15 19:42:53 发布

原创最新推荐文章于 2022-07-15 19:42:53 发布 · 1w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

Angular 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript和jQuery环境下，结合layui框架实现修改密码功能，包括HTML结构定义，修改layui.css样式以及编写js代码实现验证。

依赖：JQuery、并引入layui.js,layui.css
定义HTML

    <!--修改密码-->
    <div class="modify-pwd-layer aux-self" id="modifypwdlayer" style="display: none">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input id="mopwd" type="password" name="title" required  lay-verify="required" autofocus placeholder="请输入原密码" autocomplete="off" class="layui-input">
                </div>
                <div id="mopwd-aux" class="aux-self-word"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input id="newpwd1" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">
                </div>
                <div id="newpwd1-aux" class="aux-self-word"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">再次输入</label>
                <div class="layui-input-block">
                    <input id="newpwd2" type="password" name="title" required  lay-verify="required" placeholder="请输入原密码" autocomplete="off" class="layui-input">
                </div>
                <div id="newpwd2-aux" class="aux-self-word"></div>
            </div>
        </form>
    </div>

3.修改layui.css的样式

body .aux-self{padding: 20px;}
body .aux-self .layui-input-block{float: left;margin-left: 0;}
body .aux-self .layui-form-label{width: 90px;}
.aux-self-word{padding: 8px 10px;float: left; margin-left: 20px; border: 1px solid #e6e6e6;width: 220px;color: #ff1010;
    display: none;}

4.js

$("#mopwdbtn").click(()=> {
        showModifyLayer()
    })

function showModifyLayer() {
    let index = layer.open({
        type: 1,
        btn: ['取消','确定'],
        title: "修改密码",
        area: ["660px", "320px"],
        content: $("#modifypwdlayer"),
        //++enter
        success: function(layero, index){
            $(document).on('keydown', function(e){
                if(e.keyCode == 13){
                    deleteFile(index);
                }
            })
            getModifyPwd()
        },
        cancel: function(index, layero){
            $("#mopwd").val("")
            $("#mopwd-aux").css("display", "none")
            $("#newpwd1").val("")
            $("#newpwd1-aux").css("display", "none")
            $("#newpwd2").val("")
            $("#newpwd2-aux").css("display", "none")
        },
        yes: function (index) {
            layer.close(index);
        },btn2: function (index) {
            confirmModifyPwd(index)
            return false
        }
    });
}

function getModifyPwd() {
    var pwd
    $("#mopwd").blur(function () {
        let mopwd = $("#mopwd").val().trim();
        if (mopwd.length == 0) {
            $("#mopwd-aux").css({
                display: "block",
                color: "#ff1010",
            }).html("请输入原密码")
        } else {
            //发送ajax获得原密码 pwd
            pwd = 1

            if (mopwd != pwd) {
                $("#mopwd-aux").css({
                    display: "block",
                    color: "#ff1010",
                }).html("密码不正确")
            } else {
                $("#mopwd-aux").css({
                    display: "block",
                    color: "#5FB878"
                }).html("输入正确")
            }
        }
    })

    var newpwd1 = $("#newpwd1").val().trim()
    $("#newpwd1").blur( function () {
        newpwd1 = $("#newpwd1").val().trim()
        if (newpwd1.length == 0) {
            $("#newpwd1-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("请输入新密码")
        } else {
            $("#newpwd1-aux").css({
                display: "block",
                color: "#5FB878"
            }).html("输入正确")
        }
    })

    $("#newpwd2").focus(()=> {
        let newpwd1 = $("#newpwd1").val().trim()
        if (newpwd1.length == 0) {
            $("#newpwd1-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("请输入新密码")
        }
    })

    $("#newpwd2").blur( function () {
        let newpwd2 = $("#newpwd2").val().trim()
        if (newpwd2.length == 0) {
            $("#newpwd2-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("请输入新密码")
        } else if (newpwd1 != newpwd2) {
            $("#newpwd2-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("两次输入不一致")
            $("#newpwd1-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("两次输入不一致")

        } else if (newpwd1 == newpwd2 && newpwd1 == pwd) {
            $("#newpwd2-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("新密码不能与原密码相同")
            $("#newpwd1-aux").css({
                display: "block",
                color: "#ff1010"
            }).html("新密码不能与原密码相同")
        } else {
            $("#newpwd1-aux").css({
                display: "block",
                color: "#5FB878"
            }).html("输入正确")
            $("#newpwd2-aux").css({
                display: "block",
                color: "#5FB878"
            }).html("输入正确")
            $("#adduserlayer").data("new_pwd", newpwd1)
        }
    });
}

function confirmModifyPwd(index) {
    let newpwd = $("#adduserlayer").data("new_pwd")
    //发送ajax

    $("#mopwd").val("")
    $("#mopwd-aux").css("display", "none")
    $("#newpwd1").val("")
    $("#newpwd1-aux").css("display", "none")
    $("#newpwd2").val("")
    $("#newpwd2-aux").css("display", "none")
    layer.close(index);
}