一、记·修改用户密码功能实现
1. 新建页面 profile.jsp，添加三个输入框和提交按钮：用户输入当前密码、输入新密码、再次确认密码和重置按钮、修改密码按钮；
2. 前台 JavaScript 校验用户输入通过后触发 Ajax 请求至后台；
3. 后台（这里使用 SSM 框架实现）在 UserMapper.xml 写 SQL 语句实现，接着是 UserDao.java、UserService.java 和 UserServiceImpl.java 的接口实现；
4. 后台控制器 UserAction.java 实现，请求路径、请求参数、返回值实现。
二、相关代码示例
1. profile.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>修改密码-系统后台管理</title>
<!-- <jsp:include page="_css.jsp" /> -->
<!-- <link rel="stylesheet" type="text/css" href="<%=path%>/view/assets/javascript/editor.css"/> --> <!-- 外部样式 -->
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<!-- 内部样式 -->
<style type="text/css">
.errorMsg {
color: red;
}
.error {
border: 1px solid red;
}
.password-input {
width: 400px;
hight: 25px !importent;
margin-top: 5px;
}
.btn {
vertical-align: middle;
text-align: center;
margin-top: 30px;
width: 50%;
}
</style>
</head>
<body>
<!-- <jsp:include page="_header.jsp" /> -->
<div>
<h3>修改用户密码</h3>
<div>
<label>当前密码</label></br>
<input type="password" class="password-input" id="current_password" name="current_password" placeholder="密码长度为6-16个字符，由英文大小写字母、数字、符号组成" >
<span id="currentMsg" class="errorMsg"></span>
</div>
<div style="margin-top: 15px;"> <!-- 内联样式 -->
<label>新密码</label></br>
<input type="password" class="password-input" id="new_password" name="new_password" placeholder="新密码不能当前密码相同" >
<span id="newMsg" class="errorMsg"></span>
</div>
<div style="margin-top: 15px;">
<label>确认密码</label></br>
<input type="password" class="password-input" id="confirmation_password" name="confirmation_password" placeholder="确认密码与新密码保持一致" >
<span id="confirmMsg" class="errorMsg"></span>
</div>
<div class="btn">
<input type="reset" value="重置" onclick="clearInput();"></i>
<input type="button" value="修改密码" onclick="checkInput();"></i>
</div>
</div>
<!-- <jsp:include page="_footer.jsp" /> -->
<!-- <jsp:include page="_js.jsp">
<jsp:param value="true" name="enableScript" />
</jsp:include> -->
<!-- <script type="text/javascript" src="<%=path%>/view/assets/javascript/editor.js"></script> -->
<script type="text/javascript">
var flag = true;
function clearInput() {
$("#current_password").val("");
$("#new_password").val("");
$("#confirmation_password").val("");
clearErrorMsg();
}
function clearErrorMsg() {
$("#currentMsg").html("");
$("#newMsg").html("");
$("#confirmMsg").html("");
$("#current_password").removeClass("error");
$("#new_password").removeClass("error");
$("#confirmation_password").removeClass("error");
}
function checkInput() {
clearErrorMsg();
var currentPassword = $("#current_password").val();
var newPassword = $("#new_password").val();
var confirmPassword = $("#confirmation_password").val();
checkPwdLength(currentPassword, "currentMsg", "current_password");
checkPwdLength(newPassword, "newMsg", "new_password");
checkPwdLength(confirmPassword, "confirmMsg", "confirmation_password");
if (flag) {
$.post("<%=path%>/user/updatePassword", {
currentPassword : currentPassword,
newPassword : newPassword
}, function(data) {
if ("success" == data) {
alert("密码修改成功，请使用新密码重新登陆！");
window.location.href="<%=path%>/login";
} else {
$("#currentMsg").html(data);
$("#current_Password").addClass("error");
}
});
}
}
function checkPwdLength(obj, msg, id) {
if ("" == obj) {
$("#" + msg).html("该项不能为空！");
$("#" + id).addClass("error");
flag = false;
} else if (6 > obj.length || obj.length > 16) {
$("#" + msg).html("密码长度为6-16个字符！");
$("#" + id).addClass("error");
flag = false;
} else if($("#current_password").val() == $("#new_password").val()) {
$("#newMsg").html("新密码不能当前密码相同！");
flag = false;
} else if ($("#new_password").val() != $("#confirmation_password").val()) {
$("#confirmMsg").html("两次输入的密码不一致！");
flag = false;
} else {
flag = true;
}
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/wumz/p/8207335.html
时间： 2024-11-12 09:51:14