Tailwind CSS 實戰：表單設計與驗證實現

在 Web 開發中,表單就像是一位盡職的接待員,負責收集和驗證用戶的輸入信息。記得在一個企業級項目中,我們通過重新設計表單交互流程,將表單的完成率提升了 42%。今天,我想和大家分享如何使用 Tailwind CSS 打造一個既美觀又實用的表單系統。

設計理念

設計表單就像是在設計一次愉快的對話。一個好的表單應該像一個耐心的助手,引導用戶一步步完成信息填寫,并在用戶遇到問題時及時提供幫助。在開始編碼之前,我們需要考慮以下幾個關鍵點：

布局要清晰,讓用戶一目了然地知道需要填寫什么
交互要友好,在用戶輸入過程中提供即時反饋
驗證要智能,在適當的時機進行數據校驗
錯誤提示要明確,幫助用戶快速定位和解決問題

基礎表單組件

首先,讓我們從一些常用的表單組件開始：

<!-- 文本輸入框 -->
<div class="space-y-1"><label for="username" class="block text-sm font-medium text-gray-700">用戶名</label><div class="relative rounded-md shadow-sm"><input type="text" name="username" id="username" class="block w-full pr-10 border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="請輸入用戶名"required><!-- 驗證狀態圖標 --><div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"><svg class="h-5 w-5 text-green-500 hidden success-icon" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg><svg class="h-5 w-5 text-red-500 hidden error-icon" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /></svg></div></div><!-- 錯誤提示 --><p class="mt-1 text-sm text-red-600 hidden error-message" id="username-error"></p>
</div><!-- 密碼輸入框 -->
<div class="space-y-1"><label for="password" class="block text-sm font-medium text-gray-700">密碼</label><div class="relative rounded-md shadow-sm"><input type="password" name="password" id="password" class="block w-full pr-10 border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="請輸入密碼"required><!-- 密碼可見性切換 --><button type="button" class="absolute inset-y-0 right-0 pr-3 flex items-center"οnclick="togglePasswordVisibility(this)"><svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg></button></div><!-- 密碼強度指示器 --><div class="mt-1"><div class="h-1 w-full bg-gray-200 rounded-full overflow-hidden"><div class="h-full bg-gray-400 transition-all duration-300" id="password-strength"></div></div><p class="mt-1 text-xs text-gray-500">密碼強度: <span id="strength-text">弱</span></p></div>
</div><!-- 下拉選擇框 -->
<div class="space-y-1"><label for="country" class="block text-sm font-medium text-gray-700">國家/地區</label><div class="relative"><select id="country" name="country" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"><option value="">請選擇</option><option value="CN">中國</option><option value="US">美國</option><option value="JP">日本</option><option value="GB">英國</option></select><div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none"><svg class="h-4 w-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg></div></div>
</div><!-- 復選框組 -->
<div class="space-y-2"><label class="block text-sm font-medium text-gray-700">興趣愛好</label><div class="space-y-2"><label class="inline-flex items-center"><input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="interests" value="reading"><span class="ml-2 text-sm text-gray-600">閱讀</span></label><label class="inline-flex items-center"><input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="interests" value="music"><span class="ml-2 text-sm text-gray-600">音樂</span></label><label class="inline-flex items-center"><input type="checkbox" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="interests" value="sports"><span class="ml-2 text-sm text-gray-600">運動</span></label></div>
</div><!-- 單選按鈕組 -->
<div class="space-y-2"><label class="block text-sm font-medium text-gray-700">性別</label><div class="space-x-4"><label class="inline-flex items-center"><input type="radio" class="form-radio border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="gender" value="male"><span class="ml-2 text-sm text-gray-600">男</span></label><label class="inline-flex items-center"><input type="radio" class="form-radio border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" name="gender" value="female"><span class="ml-2 text-sm text-gray-600">女</span></label></div>
</div><!-- 文件上傳 -->
<div class="space-y-1"><label class="block text-sm font-medium text-gray-700">頭像上傳</label><div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"><div class="space-y-1 text-center"><svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"><path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg><div class="flex text-sm text-gray-600"><label for="file-upload" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500"><span>上傳文件</span><input id="file-upload" name="file-upload" type="file" class="sr-only" accept="image/*"></label><p class="pl-1">或拖拽文件到這里</p></div><p class="text-xs text-gray-500">PNG, JPG, GIF 最大 2MB</p></div></div>
</div>

表單驗證實現

接下來,我們來實現表單的驗證邏輯：

// 表單驗證類
class FormValidator {constructor(form) {this.form = form;this.validators = {username: this.validateUsername.bind(this),password: this.validatePassword.bind(this),email: this.validateEmail.bind(this),phone: this.validatePhone.bind(this)};this.init();}init() {// 綁定輸入事件this.form.querySelectorAll('input[data-validate]').forEach(input => {input.addEventListener('input', () => this.validateField(input));input.addEventListener('blur', () => this.validateField(input));});// 綁定表單提交事件this.form.addEventListener('submit', (e) => {e.preventDefault();if (this.validateAll()) {this.submitForm();}});}// 驗證單個字段validateField(input) {const field = input.name;const value = input.value;const validator = this.validators[field];if (validator) {const result = validator(value);this.updateFieldStatus(input, result);return result.isValid;}return true;}// 驗證所有字段validateAll() {let isValid = true;this.form.querySelectorAll('input[data-validate]').forEach(input => {if (!this.validateField(input)) {isValid = false;}});return isValid;}// 更新字段狀態updateFieldStatus(input, result) {const container = input.closest('.form-field');const errorMessage = container.querySelector('.error-message');const successIcon = container.querySelector('.success-icon');const errorIcon = container.querySelector('.error-icon');if (result.isValid) {input.classList.remove('border-red-500');input.classList.add('border-green-500');errorMessage.classList.add('hidden');successIcon.classList.remove('hidden');errorIcon.classList.add('hidden');} else {input.classList.remove('border-green-500');input.classList.add('border-red-500');errorMessage.textContent = result.message;errorMessage.classList.remove('hidden');successIcon.classList.add('hidden');errorIcon.classList.remove('hidden');}}// 驗證規則validateUsername(value) {if (!value) {return {isValid: false,message: '用戶名不能為空'};}if (value.length < 3) {return {isValid: false,message: '用戶名至少需要3個字符'};}return {isValid: true};}validatePassword(value) {const hasNumber = /\d/.test(value);const hasLetter = /[a-zA-Z]/.test(value);const hasSpecial = /[!@#$%^&*]/.test(value);if (!value) {return {isValid: false,message: '密碼不能為空'};}if (value.length < 8) {return {isValid: false,message: '密碼至少需要8個字符'};}if (!(hasNumber && hasLetter && hasSpecial)) {return {isValid: false,message: '密碼需要包含數字、字母和特殊字符'};}return {isValid: true};}validateEmail(value) {const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if (!value) {return {isValid: false,message: '郵箱不能為空'};}if (!emailRegex.test(value)) {return {isValid: false,message: '請輸入有效的郵箱地址'};}return {isValid: true};}validatePhone(value) {const phoneRegex = /^1[3-9]\d{9}$/;if (!value) {return {isValid: false,message: '手機號不能為空'};}if (!phoneRegex.test(value)) {return {isValid: false,message: '請輸入有效的手機號'};}return {isValid: true};}// 提交表單async submitForm() {try {const formData = new FormData(this.form);const response = await fetch(this.form.action, {method: 'POST',body: formData});if (response.ok) {this.showSuccess();} else {this.showError();}} catch (error) {this.showError();}}// 顯示成功提示showSuccess() {const toast = document.createElement('div');toast.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300';toast.textContent = '提交成功！';document.body.appendChild(toast);setTimeout(() => {toast.remove();}, 3000);}// 顯示錯誤提示showError() {const toast = document.createElement('div');toast.className = 'fixed bottom-4 right-4 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300';toast.textContent = '提交失敗,請重試';document.body.appendChild(toast);setTimeout(() => {toast.remove();}, 3000);}
}

密碼強度檢測

為了提升用戶體驗,我們可以添加實時的密碼強度檢測：

class PasswordStrengthMeter {constructor(input, indicator, text) {this.input = input;this.indicator = indicator;this.text = text;this.init();}init() {this.input.addEventListener('input', () => {const strength = this.calculateStrength(this.input.value);this.updateUI(strength);});}calculateStrength(password) {let score = 0;// 長度檢查if (password.length >= 8) score += 1;if (password.length >= 12) score += 1;// 復雜度檢查if (/[0-9]/.test(password)) score += 1;if (/[a-z]/.test(password)) score += 1;if (/[A-Z]/.test(password)) score += 1;if (/[^0-9a-zA-Z]/.test(password)) score += 1;// 重復字符檢查if (!/(.)\1{2,}/.test(password)) score += 1;return score;}updateUI(score) {let strength, color;if (score <= 2) {strength = '弱';color = 'bg-red-500';} else if (score <= 4) {strength = '中';color = 'bg-yellow-500';} else {strength = '強';color = 'bg-green-500';}// 更新進度條this.indicator.className = `h-full transition-all duration-300 ${color}`;this.indicator.style.width = `${(score / 7) * 100}%`;// 更新文本this.text.textContent = strength;}
}

文件上傳預覽

對于文件上傳,我們可以添加拖拽上傳和預覽功能：

class FileUploader {constructor(container) {this.container = container;this.input = container.querySelector('input[type="file"]');this.preview = container.querySelector('.preview');this.dropZone = container.querySelector('.drop-zone');this.init();}init() {// 點擊上傳this.input.addEventListener('change', (e) => {this.handleFiles(e.target.files);});// 拖拽上傳this.dropZone.addEventListener('dragover', (e) => {e.preventDefault();this.dropZone.classList.add('border-indigo-500');});this.dropZone.addEventListener('dragleave', () => {this.dropZone.classList.remove('border-indigo-500');});this.dropZone.addEventListener('drop', (e) => {e.preventDefault();this.dropZone.classList.remove('border-indigo-500');this.handleFiles(e.dataTransfer.files);});}handleFiles(files) {Array.from(files).forEach(file => {// 檢查文件類型if (!file.type.startsWith('image/')) {this.showError('請上傳圖片文件');return;}// 檢查文件大小if (file.size > 2 * 1024 * 1024) {this.showError('文件大小不能超過2MB');return;}// 創建預覽const reader = new FileReader();reader.onload = (e) => {this.createPreview(e.target.result, file.name);};reader.readAsDataURL(file);});}createPreview(src, name) {const preview = document.createElement('div');preview.className = 'relative group';preview.innerHTML = `<img src="${src}" alt="${name}" class="w-20 h-20 object-cover rounded-lg"><button type="button" class="absolute top-0 right-0 -mt-2 -mr-2 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200"><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg></button>`;// 刪除預覽preview.querySelector('button').addEventListener('click', () => {preview.remove();this.input.value = '';});this.preview.appendChild(preview);}showError(message) {const error = document.createElement('div');error.className = 'text-sm text-red-500 mt-1';error.textContent = message;this.container.appendChild(error);setTimeout(() => {error.remove();}, 3000);}
}

動態表單字段

有時我們需要動態添加或刪除表單字段：

class DynamicFields {constructor(container) {this.container = container;this.template = container.querySelector('.field-template');this.fieldsList = container.querySelector('.fields-list');this.addButton = container.querySelector('.add-field');this.init();}init() {this.addButton.addEventListener('click', () => {this.addField();});}addField() {const field = this.template.cloneNode(true);field.classList.remove('hidden', 'field-template');// 更新字段索引const index = this.fieldsList.children.length;field.querySelectorAll('[name]').forEach(input => {input.name = input.name.replace('__INDEX__', index);});// 添加刪除按鈕const deleteButton = field.querySelector('.delete-field');deleteButton.addEventListener('click', () => {field.remove();this.updateIndexes();});this.fieldsList.appendChild(field);}updateIndexes() {Array.from(this.fieldsList.children).forEach((field, index) => {field.querySelectorAll('[name]').forEach(input => {input.name = input.name.replace(/\d+/, index);});});}
}

表單狀態管理

為了更好地管理表單狀態,我們可以使用發布訂閱模式：

class FormState {constructor() {this.subscribers = [];this.state = {};}subscribe(callback) {this.subscribers.push(callback);return () => {this.subscribers = this.subscribers.filter(cb => cb !== callback);};}notify() {this.subscribers.forEach(callback => callback(this.state));}setState(newState) {this.state = { ...this.state, ...newState };this.notify();}getState() {return this.state;}
}// 使用示例
const formState = new FormState();// 訂閱狀態變化
formState.subscribe((state) => {// 更新UIObject.entries(state).forEach(([field, value]) => {const input = document.querySelector(`[name="${field}"]`);if (input) {input.value = value;}});
});// 監聽輸入變化
document.querySelectorAll('input, select, textarea').forEach(input => {input.addEventListener('input', (e) => {formState.setState({[e.target.name]: e.target.value});});
});