修改密码-优快云博客

本文链接：https://blog.youkuaiyun.com/zhaoyaxiansheng/article/details/98877183

本文详细介绍了使用JSP和Spring框架实现用户密码修改的过程，包括前端表单设计、后端数据验证及密码加密处理。通过AJAX进行实时密码校验，确保密码安全性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/common/taglib.jsp" %>

<!DOCTYPE html>
<html>
<!--  /table_bootstrap.html -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <link href="<%=context%>/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=context%>/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <%--<link href="<%=context%>/css/animate.min.css" rel="stylesheet">--%>
    <link href="<%=context%>/css/style.min.css?v=4.1.0" rel="stylesheet">
    <link href="<%=context%>/css/common.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">

    <div class="ibox float-e-margins">
        <%--<div class="ibox-title">--%>
            <%--<h5>完整验证表单</h5>--%>
        <%--</div>--%>
        <div class="ibox-content">
            <form class="form-horizontal m-t" id="reSetPwd">
            <div class="item form-group col-md-12  tip"   >
                    <div class="col-md-offset-3 col-md-3" style="color:red;display:none;" id="tip"></div>
             </div>
                <div class="form-group">
                   <%--  <input type="hidden" value="${md5Pwd}" id="md5Pwd" name=""/> --%>
                    <input type="hidden" value="${userId}" id="userId" name=""/>
                     <label class="col-sm-3 control-label">输入旧密码：</label>
                    <div class="col-sm-8">
                        <input id="oldPwd" name="oldPwd"  class="form-control" type="password">
                        <%--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>--%>
                    </div>
                </div>
                 <div class="form-group">
                    <label class="col-sm-3 control-label">输入新密码：</label>
                    <div class="col-sm-8">
                        <input id="newPwd1" name="newPwd1" class="form-control" type="password">
                        <%--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>--%>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">确认新密码：</label>
                    <div class="col-sm-8">
                        <input id="newPwd2" name="newPwd2" class="form-control" type="password">
                        <%--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>--%>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3">
                        <button class="btn btn-primary" type="submit" id="submit">保存</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- End Panel Other -->
</div>
<script src="<%=context%>/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=context%>/js/bootstrap.min.js?v=3.3.6"></script>
<script src="<%=context%>/js/content.min.js?v=1.0.0"></script>
<script src="<%=context%>/js/plugins/validate/jquery.validate.min.js"></script>
<script src="<%=context%>/js/plugins/validate/messages_zh.min.js"></script>
<script src="<%=context%>/js/demo/form-validate-demo.min.js"></script>
<%--弹出框组件--%>
<script src="<%=context%>/js/plugins/layer/layer.js"></script>
<script type="text/javascript">

$(function(){ 
	
	/* 旧密码校验 */
　　　　　$("#oldPwd").blur(function(){
	               $.ajax({
	                   type: "POST",
	                   async: true,
	                   data:{userId:$("#userId").val(),oldPwd:$("#oldPwd").val()},
	                   url: '<%=context%>/sys/user/verify',
	                   success: function (data) {
	                       var jsonData = $.parseJSON(JSON.stringify(data));
	                       if(jsonData.status==0){/* 旧密码输入正确 */
	     	                  $("#tip").hide();
	     	                  $("#tip").val("");
	                     }else{/* 旧密码输入不正确 */
	                   	    $("#tip").html(jsonData.msg);
	     	                  $("#tip").show();
	     	                 $("#oldPwd").val("");
	                     }
	                   }
	               });
　　　　　});

// 表单验证
$("#reSetPwd").validate({
    rules:{
         'oldPwd':{
            required:true,
            maxlength:21,
        },
        'newPwd1':{
            required:true,
            maxlength:21,
            vPassword:true,
        },
        'newPwd2':{
            required:true,
            maxlength:21,
            vPassword2:true,
        } 
    },
    messages:{
         'oldPwd':{
            required:"请输入旧密码",
            maxlength:"最大长度21",
        },
        'newPwd1':{
            required:"请输入新密码",
            maxlength:"最大长度21",
        },
        'newPwd2':{
            required:"请确认新密码",
            maxlength:"最大长度21",
        } 
    },
    submitHandler : function(form) {
        $.ajax({
            type: "POST",
            async: true,
            data:{userId:$("#userId").val(),newPwd1:$("#newPwd1").val()},
            url: '<%=context%>/sys/user/resetPwd',
            success: function (data) {
                var jsonData = $.parseJSON(JSON.stringify(data));
                var index = parent.layer.getFrameIndex(window.name);
                if (jsonData.status == 0) {
                    parent.$("#layer_status").val(0);
                } else {
                    parent.$("#layer_status").val(1);
                }
                parent.$("#layer_msg").val(jsonData.msg);
                parent.layer.close(index);
            }
        });
    }
});


}); 


//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
$.validator.addMethod("vPassword", function(value, element) {
   var v_regex=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
	  value=""+value;
	  if(value){
	    if(!v_regex.test(value)){
	      return false;
	    }else{
	      return true;
	    }
	  }else{
	    return null;
	  }
	}, "密码由6-21字母和数字组成，不能是纯数字或纯英文");

//密码确认
$.validator.addMethod("vPassword2", function(value, element) {
	    var newPwd1 = $("#newPwd1").val();
	  value=""+value;
	  if(value){
	    if(value == newPwd1){
	    	return true;
	    }else{
	      return false;
	    }
	  }else{
	    return null;
	  } 
	}, "两次输入的密码不一致");


</script>

</body>


<!--  /table_bootstrap.html -->
</html>

2.controller

/**
	 * 校验输入的旧密码是否正确
	 * 
	 * @return
	 */
	@RequestMapping("/verify")
	@ResponseBody
	public ServerResponse verifyPwdById(@RequestParam(required = false) int userId,
			@RequestParam(required = false) String oldPwd, HttpSession session) {
		User user = userService.findUserById(userId);
		String password = user.getPassword();
		String inputOldPwd = DigestUtils.md5Hex(oldPwd.getBytes());
		
		if (!password.equals(inputOldPwd)) {
			return ServerResponse.createByErrorMessage("输入的旧密码不正确");
		}else {
			return ServerResponse.createBySuccessMessage("旧密码输入正确");
		}
	}
	/**
	 * 修改用户密码
	 * 
	 * @return
	 */
	@RequestMapping(value = "/resetPwd")
	@ResponseBody
	public ServerResponse resetPwdById(@RequestParam(required = false) int userId,
			@RequestParam(required = false) String newPwd1, HttpSession session) {
		User user = new User();
		user.setId(userId);
		user.setPassword(DigestUtils.md5Hex(newPwd1.getBytes()));
		if (newPwd1!=null) {
			int count = userService.editUserById(user);
			if (count > 0) {
				return ServerResponse.createBySuccessMessage("修改密码成功");
			} else {
				return ServerResponse.createByErrorMessage("修改密码失败");
			}
		}
		return null;
		
	}