源内容（英文）
在几乎所有的现代网站中，我们都见过登录和注册功能，这对于客户和服务提供商来说无疑是一项重要的服务。当用户注册某个网站时，他们必须输入用户名和密码。为了确保用户的安全，防止输错密码，网站通常会要求用户输入两次密码。在本文中，我们将使用 HTML、CSS 和 JavaScript 来创建一个确认密码的验证功能。
实现思路
- HTML 结构:
- HTML 结构定义了一个简单的表单，包含用户名、密码和确认密码字段。同时，它还包含了利用 Flexbox 实现的居中和样式化的 UI 代码。
- 密码确认验证:
- 当确认密码字段触发每一次 INLINECODEb88dea85（按键抬起）事件时，都会调用 JavaScript 函数 INLINECODE1add25c5。
- 它会比较“密码”和“确认密码”的值，并提供视觉反馈。如果密码不匹配，则会禁用提交按钮。
- 视觉反馈:
- 通过
wrong_pass_alertspan 元素中显示的不同颜色和符号，来展示密码匹配或不匹配的视觉反馈。 - 提交按钮功能:
- 当点击提交按钮时，会调用
wrong_pass_alert()函数。 - 它会检查“密码”和“确认密码”字段是否都已填写。如果是，则显示带有成功消息的提示；否则，提示用户填写所有字段。
- 样式与 UI:
- 应用了 CSS 样式以创建视觉上吸引人的 UI，包括居中的表单、圆角输入字段和提交按钮。悬停效果和阴影增强了用户体验。
示例: 以下是上述方法的实现代码。
HTML
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
margin: 0;
}
.form-container {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
.error {
color: red;
font-size: 0.875rem;
}
.success {
color: green;
font-size: 0.875rem;
}
.submit-btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 1rem;
opacity: 0.6; / Initially disabled /
pointer-events: none; / Initially disabled /
}
.submit-btn.enabled {
opacity: 1; / Enabled /
pointer-events: auto; / Enabled /
}
.submit-btn:hover {
background-color: #0056b3;
}
Create Account
document.getElementById(‘registrationForm‘).addEventListener(‘input‘, function () {
validateForm();
});
function validateForm() {
const username = document.getElementById(‘username‘).value;
const password = document.getEleme