修改账号密码的前端代码
时间: 2024-04-11 09:26:45 浏览: 8
当然,我可以帮你提供修改账号密码的前端代码示例。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>修改密码</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
<h1>修改密码</h1>
<form id="passwordForm">
<label for="currentPassword">当前密码:</label>
<input type="password" id="currentPassword" name="currentPassword"><br><br>
<label for="newPassword">新密码:</label>
<input type="password" id="newPassword" name="newPassword"><br><br>
<label for="confirmPassword">确认新密码:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<button type="submit">提交</button>
</form>
<script>
// 监听表单提交事件
document.getElementById("passwordForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var currentPassword = document.getElementById("currentPassword").value;
var newPassword = document.getElementById("newPassword").value;
var confirmPassword = document.getElementById("confirmPassword").value;
// 在这里添加密码验证逻辑,确保新密码和确认新密码匹配,并满足其他要求
// 发送请求到后端进行密码更新
var request = new XMLHttpRequest();
request.open("POST", "/api/update-password", true);
request.setRequestHeader("Content-Type", "application/json");
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
Swal.fire({
icon: 'success',
title: '密码已成功更新',
text: '您的密码已成功更新。',
showConfirmButton: false,
timer: 2000
});
} else if (request.readyState === 4 && request.status !== 200) {
Swal.fire({
icon: 'error',
title: '密码更新失败',
text: '密码更新失败,请稍后再试。',
showConfirmButton: false,
timer: 2000
});
}
};
var requestBody = {
currentPassword: currentPassword,
newPassword: newPassword
};
request.send(JSON.stringify(requestBody));
});
</script>
</body>
</html>
```
这是一个基本的HTML页面,包含一个表单用于接收当前密码、新密码和确认新密码。当用户点击提交按钮时,通过JavaScript发送POST请求到后端API进行密码更新。这里使用了`XMLHttpRequest`对象发送请求,并使用`Swal.fire`库显示成功或失败的消息。
请注意,这只是一个简单的示例,实际上你需要在后端实现相应的API来处理密码更新请求,并在前端添加更多的验证逻辑来确保安全性。此外,也可以根据具体需求进行样式和功能上的定制。