密码修改时ajax校验旧密码是否正确

最新推荐文章于 2022-07-18 21:57:23 发布

原创最新推荐文章于 2022-07-18 21:57:23 发布 · 940 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Thymeleaf和jQuery实现的前端密码验证功能，包括原密码的即时校验及新密码的一致性检查。通过AJAX异步请求与后端交互，确保密码正确性后再提交表单。

<script type="text/javascript" th:inline="javascript">
    // 要使用thymeleaf行内表达式则上面需要使用：th:inline="javascript" 标识
    $(function () {

        var isCheck = false;
        //原密码失去焦点
        $("#oldPassword").blur(function () {
            var oldPassword = $(this).val().trim();
            if(!oldPassword) {
                $('#pwdText').css('color', 'red');
                isCheck = false;
                return ;
            }


            //theymeleaf行内表达式
            var url = [[@{/user/pwd/}]] + oldPassword;
            //异步判断密码是否正确
            $.ajax({
                url: url,
                dataType: 'json',
                method: 'GET',
                success: function (data) {
                    isCheck = data;
                    data ? $("#pwdText").replaceWith("<span id='pwdText'>*原密码正确</span>")
                        : $("#pwdText").replaceWith("<span id='pwdText' style='color: red'>*原密码错误</span>");
                },
                error: function () {
                    $('#pwdText').html("校验原密码异常");
                    isCheck = false;
                }
            });
        });

        $("#save").click(function () {

            if(isCheck) {
                if($("#newPassword").val() && $("#reNewPassword").val()
                    && $("#newPassword").val() == $("#reNewPassword").val()) {
                    $("#pwdForm").submit();
                }else{
                    $("#reNewPwdText").replaceWith("<span id='reNewPwdText' style='color: red'>*保证和新密码一致</span>");
                }
            }

        });
    });
</script>