首页html，给我一个密码重置页面，有原密码、新密码、再次输入新密码和重置按钮，其中当点击重置按钮时会先判断密码是否全部不为空，否弹窗提醒，然后判断新密码和再次输入密码是否一致，否弹窗提醒修改，是跳转Test02.html页面，显示整体居于页面中间。请给出详细代码

html，给我一个密码重置页面，有原密码、新密码、再次输入新密码和重置按钮，其中当点击重置按钮时会先判断密码是否全部不为空，否弹窗提醒，然后判断新密码和再次输入密码是否一致，否弹窗提醒修改，是跳转Test02.html页面，显示整体居于页面中间。请给出详细代码

时间: 2024-09-27 09:07:39 浏览: 51

HTML结构部分可以使用以下代码创建一个简单的密码重置表单，包含必要的验证功能： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>密码重置</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; font-family: Arial, sans-serif; } .container { max-width: 400px; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="container"> <h2>密码重置</h2> <form id="resetForm" onsubmit="return validateForm()"> <label for="oldPassword">原密码:</label> <input type="password" id="oldPassword" required><br> <label for="newPassword">新密码:</label> <input type="password" id="newPassword" required><br> <label for="confirmPassword">再次输入新密码:</label> <input type="password" id="confirmPassword" required><br> <button type="submit">重置密码</button> </form> <p id="errorMessages"></p> </div> <script> function validateForm() { let oldPassword = document.getElementById('oldPassword').value; let newPassword = document.getElementById('newPassword').value; let confirmPassword = document.getElementById('confirmPassword').value; if (!oldPassword || !newPassword || !confirmPassword) { showErrorMessage("所有字段都不能为空"); return false; } if (newPassword !== confirmPassword) { showErrorMessage("两次输入的密码不一致"); return false; } else { window.location.href = "Test02.html"; return false; // 阻止表单提交到服务器 } } function showErrorMessage(message) { document.getElementById('errorMessages').innerText = message; } </script> </body> </html> ```

阅读全文