<span style="color:#cc33cc"><strong>實現用戶密碼的修改，前端校驗，代碼參考如下：</strong></span>
前端頁面：
<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" th:href="@{css/passwd.css}"/>
<link rel="stylesheet" th:href="@{css/user.css}"/>
</head>
<body>
<div class="common-container">
<header class="common-header clearfix">
<span class="user-title common-title" th:text="#{userManager}">用戶管理</span>
</header>
<main>
<header class="common-table-title" th:text="#{updatePasswd}">修改密碼</header>
<div class="modifyPwd-container">
<form class="modifyPwd-form">
<fieldset>
<div class="modifyPwd-item model-select-item resetPwd">
<label th:inline="text"><em class="red">*</em>[[#{oldPasswd}]]</label>
<input id="oldPassword" th:placeholder="#{user.modify.oldPasswd}" type="password" class="resetPwd-form-input input-field modifyPwd-form-input"/>
</div>
<div class="modifyPwd-item model-select-item resetPwd">
<label th:inline="text"><em class="red">*</em>[[#{newPasswd}]]</label>
<input id="newPassword" th:placeholder="#{user.modify.newPasswd}" type="password" class="resetPwd-form-input input-field modifyPwd-form-input"/>
<b th:text="#{passwordRole}">密碼8-12位，含數字、大小寫字母中任意兩種及以上
</b>
</div>
<div class="modifyPwd-item model-select-item resetPwd">
<label th:inline="text"><em class="red">*</em>[[#{secondNewPasswd}]]</label>
<input id="repeatPassword" th:placeholder="#{user.modify.secondNewPasswd}" type="password" class="resetPwd-form-input input-field modifyPwd-form-input"/>
<b th:text="#{passwordRole}">密碼8-12位含數字、大小寫字母、特殊字符兩種及以上
</b>
</div>
</fieldset>
<div class="modifyPass-btn">
<input type="button" th:value="#{submit}" onclick = "modifyPwdSumbit()" class="modifyPwd-save-btn"/>
</div>
</form>
</div>
</main>
<script th:inline="javascript" th:src="@{js/user.js}"></script>
<script>
$(".resetPwd-form-input").blur(function () {
$(this).removeClass("error-tip")
})
</script>
</div>
</body>
</html>
js判斷：
function modifyPwdSumbit(){
if($('#oldPassword').val()==""){
alert('原始密碼爲空');
return
}
if($('#newPassword').val()==""){
alert('新密碼爲空');
return
}
if($('#repeatPassword').val()==""){
alert('確認密碼爲空');
return
}
var data={
'oldPassword':$('#oldPassword').val(),
'newPassword':$('#newPassword').val(),
'repeatPassword':$('#repeatPassword').val()
}
$.ajax({
type:"POST",
url:"user/modifyPwd",
dataType:"json",
contentType:"application/json",
data:JSON.stringify(data),
success:function(res){
console.log(res)
if(res.code == 200){
alert(res.msg)
showModifyPwdPage()
}
}
});
}
