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

1. 依赖：JQuery、并引入layui.js,layui.css

2. 定义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);}