在Web開發中，HTML、CSS和JavaScript構成了基本的前端技術棧。其中，HTML負責頁面結構和內容、CSS負責頁面布局和樣式、JavaScript則負責頁面交互和動態效果。在實際項目中，我們通常需要用到這三者來實現一些復雜的功能。

例如，我們經常需要實現一個注冊頁面，該頁面需要用戶輸入一些基本信息，并進行表單驗證。下面是一個示例的HTML、CSS和JavaScript代碼：

<!-- HTML代碼 -->
<form id="register-form" action="#" method="post">
<div class="form-item">
<label for="username">用戶名</label>
<input type="text" id="username" name="username">
<span class="error-msg"></span>
</div>
<div class="form-item">
<label for="password">密碼</label>
<input type="password" id="password" name="password">
<span class="error-msg"></span>
</div>
<div class="form-item">
<label for="confirm-password">確認密碼</label>
<input type="password" id="confirm-password" name="confirm-password">
<span class="error-msg"></span>
</div>
<div class="form-item">
<label for="email">郵箱</label>
<input type="text" id="email" name="email">
<span class="error-msg"></span>
</div>
<button type="submit">注冊</button>
</form>
/* CSS代碼 */
.form-item {
margin-bottom: 16px;
}
label {
display: block;
margin-bottom: 4px;
}
input {
width: 100%;
padding: 8px;
font-size: 16px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 8px 16px;
font-size: 16px;
border-radius: 4px;
border: none;
background-color: #007bff;
color: #fff;
}
/* JavaScript代碼 */
const form = document.querySelector('#register-form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');
const confirmPasswordInput = document.querySelector('#confirm-password');
const emailInput = document.querySelector('#email');
const errorMessages = document.querySelectorAll('.error-msg');
form.addEventListener('submit', (event) =>{
event.preventDefault();
clearErrors();
const username = usernameInput.value.trim();
const password = passwordInput.value.trim();
const confirmPassword = confirmPasswordInput.value.trim();
const email = emailInput.value.trim();
if (!username) {
showError(usernameInput, '用戶名不能為空');
} else if (username.length< 6 || username.length >16) {
showError(usernameInput, '用戶名長度應在6-16個字符之間');
}
if (!password) {
showError(passwordInput, '密碼不能為空');
} else if (password.length< 6 || password.length >12) {
showError(passwordInput, '密碼長度應在6-12個字符之間');
}
if (!confirmPassword) {
showError(confirmPasswordInput, '請確認密碼');
} else if (password !== confirmPassword) {
showError(confirmPasswordInput, '兩次輸入的密碼不一致');
}
if (!email) {
showError(emailInput, '郵箱不能為空');
} else if (!/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(email)) {
showError(emailInput, '郵箱格式不正確');
}
});
function showError(input, message) {
const errorMessage = input.nextElementSibling;
errorMessage.innerText = message;
input.classList.add('error');
}
function clearErrors() {
errorMessages.forEach((element) =>{
element.innerText = '';
});
usernameInput.classList.remove('error');
passwordInput.classList.remove('error');
confirmPasswordInput.classList.remove('error');
emailInput.classList.remove('error');
}

該示例代碼中，HTML部分定義了一個表單，包含用戶名、密碼、確認密碼和郵箱四個輸入框，以及一個提交按鈕。CSS部分定義了表單的基本樣式，包括輸入框和按鈕的樣式。JavaScript部分則定義了表單提交事件的響應函數，以及一些表單驗證的邏輯。在表單驗證邏輯中，我們定義了一個showError函數用于顯示錯誤提示信息，以及一個clearErrors函數用于清除之前的錯誤提示信息。在每個輸入框的blur事件（失焦事件）中調用showError函數，根據不同的驗證規則顯示對應的錯誤提示信息。當表單提交時，調用表單的preventDefault方法阻止默認提交行為，進行表單驗證并根據驗證結果顯示錯誤信息。