Pengesahan dan Keadaan Ralat
Paparkan keadaan berjaya dan ralat pada medan borang menggunakan kelas warna bersyarat untuk sempadan, gelang dan teks bantuan.
Pengesahan dan Keadaan Ralat ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Mengapa Pengesahan yang Jelas Penting
Maklum balas pengesahan borang yang kurang baik ialah salah satu punca utama pengguna meninggalkan borang. Pengguna yang mengisi medan secara salah perlu mengetahui dengan segera medan mana yang salah dan sebabnya. Mesej ralat yang kabur seperti Borang mengandungi ralat tidak membantu.
Dengan Tailwind, anda menyampaikan keadaan pengesahan melalui tiga saluran visual: warna jidar input, gelang berwarna apabila difokus, dan mesej ralat di bawah medan bersama ikon. Pendekatan berbilang saluran ini membantu semua pengguna, termasuk mereka yang mempunyai kekurangan penglihatan warna.
Penggayaan Input Keadaan Ralat
Input ralat menukar jidadnya kepada warna merah: gantikan border-gray-300 dengan border-red-500. Apabila difokus, paparkan gelang merah dan bukannya biru biasa: focus:ring-red-500.
Gabungan jidar merah dalam keadaan lalai dan gelang merah apabila difokus memastikan ralat kelihatan ketika medan aktif dan selepas pengguna beralih ke medan lain. Tambahkan rona latar merah yang halus bg-red-50 untuk lebih menonjolkan ralat kritikal.
<!-- Error state input -->
<input
type="email"
value="not-an-email"
aria-invalid="true"
aria-describedby="email-error"
class="w-full px-3 py-2 text-sm text-gray-900 bg-red-50
border border-red-500 rounded-lg
focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
/>Mesej Ralat di Bawah Medan
Mesej ralat muncul di bawah input untuk menerangkan perkara yang tidak berlaku dengan betul. Gunakan flex items-center gap-1 mt-1 text-xs text-red-600 pada bekas mesej. Tambahkan ikon untuk kejelasan tambahan — bulatan tanda seru kecil berwarna merah mengukuhkan keadaan ralat secara visual.
Sambungkan mesej ralat kepada input dengan aria-describedby pada input dan id yang sepadan pada perenggan mesej. Ini membolehkan pembaca skrin mengumumkan ralat secara automatik apabila medan menerima fokus.
<div class="flex flex-col gap-1">
<label for="email" class="text-sm font-medium text-gray-700">Email address</label>
<input
id="email"
type="email"
value="bad-email"
aria-invalid="true"
aria-describedby="email-err"
class="w-full px-3 py-2 text-sm border border-red-500 bg-red-50 rounded-lg
focus:outline-none focus:ring-2 focus:ring-red-500"
/>
<p id="email-err" role="alert" class="flex items-center gap-1 mt-1 text-xs text-red-600">
<svg class="w-3.5 h-3.5" 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>
Please enter a valid email address.
</p>
</div>Penggayaan Input dalam Keadaan Berjaya
Apabila medan lulus pengesahan, tunjukkan keadaan berjaya dengan sempadan hijau dan ikon tanda semak di bawah medan. Gantikan border-red-500 dengan border-green-500 dan gunakan focus:ring-green-500 untuk gelang fokus.
Mesej berjaya menggunakan flex items-center gap-1 mt-1 text-xs text-green-600 bersama ikon tanda semak. Keadaan berjaya amat berguna untuk pengesahan masa nyata, seperti semakan ketersediaan nama pengguna, apabila maklum balas positif serta-merta dapat meningkatkan keyakinan pengguna.
<div class="flex flex-col gap-1">
<label for="username" class="text-sm font-medium text-gray-700">Username</label>
<input
id="username"
type="text"
value="awesome_dev"
class="w-full px-3 py-2 text-sm border border-green-500 bg-green-50 rounded-lg
focus:outline-none focus:ring-2 focus:ring-green-500"
/>
<p class="flex items-center gap-1 mt-1 text-xs text-green-600">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
</svg>
Username is available!
</p>
</div>Kelas Bersyarat dengan JavaScript
Dalam aplikasi sebenar, keadaan ralat dan berjaya digunakan secara bersyarat berdasarkan hasil pengesahan. Dalam JavaScript biasa, ini bermaksud menogol kelas pada input serta memaparkan atau menyembunyikan elemen mesej ralat.
Coraknya ialah menggunakan set kelas neutral lalai, set kelas ralat dan set kelas berjaya — kemudian menambahkan tepat satu daripadanya pada input apabila diperlukan. Mengalih keluar semua kelas keadaan sebelum menambahkan keadaan baharu dapat mengelakkan konflik kelas.
<script>
function validateEmail(input) {
const errorEl = document.getElementById('email-error');
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
// Remove previous states
input.classList.remove(
'border-gray-300', 'border-red-500', 'border-green-500',
'focus:ring-blue-500', 'focus:ring-red-500', 'focus:ring-green-500'
);
if (!emailRegex.test(input.value)) {
input.classList.add('border-red-500', 'focus:ring-red-500');
errorEl.classList.remove('hidden');
} else {
input.classList.add('border-green-500', 'focus:ring-green-500');
errorEl.classList.add('hidden');
}
}
</script>
<input type="email" onblur="validateEmail(this)"
class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" />Ringkasan Ralat pada Peringkat Borang
Untuk borang yang kompleks, paparkan ringkasan ralat pada peringkat borang di bahagian atas apabila pengguna cuba menghantar borang yang mempunyai beberapa medan tidak sah. Ini mengelakkan pengguna daripada perlu menatal seluruh borang untuk menemukan semua ralat.
Gayakan ringkasan itu sebagai kotak amaran merah: border border-red-200 bg-red-50 rounded-lg p-4 bersama ikon ralat dan senarai tidak tersusun yang mengandungi mesej ralat. Fokuskan elemen ini apabila dipaparkan supaya pengguna papan kekunci dan pembaca skrin dapat mendengar ringkasan itu dengan serta-merta.
<div role="alert" class="border border-red-200 bg-red-50 rounded-lg p-4 mb-6">
<div class="flex items-center gap-2 mb-2">
<svg class="w-5 h-5 text-red-500" 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>
<p class="text-sm font-semibold text-red-700">Please fix the following errors:</p>
</div>
<ul class="ml-5 list-disc space-y-1">
<li class="text-sm text-red-600">Email address is required.</li>
<li class="text-sm text-red-600">Password must be at least 8 characters.</li>
</ul>
</div>Keadaan Amaran untuk Isu yang Tidak Menghalang
Keadaan amaran menunjukkan keadaan yang berpotensi bermasalah tetapi tidak menghalang — contohnya, kata laluan yang memenuhi keperluan minimum tetapi lemah, atau nama pengguna yang tersedia tetapi serupa dengan nama sedia ada.
Gunakan warna kuning ambar untuk amaran: border-yellow-400 pada input dan text-yellow-700 pada mesej bersama ikon amaran. Amaran tidak sepatutnya menghalang penghantaran borang — amaran ini bersifat maklumat, bukannya ralat yang menghalang.
<div class="flex flex-col gap-1">
<label for="pw-warn" class="text-sm font-medium text-gray-700">Password</label>
<input
id="pw-warn"
type="password"
value="password123"
class="w-full px-3 py-2 text-sm border border-yellow-400 rounded-lg
focus:outline-none focus:ring-2 focus:ring-yellow-400"
/>
<p class="flex items-center gap-1 mt-1 text-xs text-yellow-700">
<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
</svg>
Weak password. Consider adding symbols or uppercase letters.
</p>
</div>Penunjuk Kekuatan Kata Laluan
Bar kekuatan kata laluan ialah komponen visual yang dikemas kini secara masa nyata semasa pengguna menaip. Laksanakannya sebagai bar nipis di bawah input yang dibahagikan kepada segmen, yang diisi dengan warna apabila kata laluan menjadi lebih kukuh.
Gunakan bekas flex gap-1 dengan beberapa segmen h-1 rounded-full. Warnakan segmen secara bersyarat: kelabu apabila kosong, merah apabila lemah, kuning apabila sederhana dan hijau apabila kukuh. Ini ialah contoh praktikal penggunaan kelas bersyarat dalam Tailwind.
<!-- 4-segment strength bar -->
<div class="flex gap-1 mt-2">
<!-- Segment 1: always filled if any input -->
<div class="flex-1 h-1.5 rounded-full bg-red-500"></div>
<!-- Segment 2: filled if medium+ -->
<div class="flex-1 h-1.5 rounded-full bg-yellow-400"></div>
<!-- Segment 3: filled if strong -->
<div class="flex-1 h-1.5 rounded-full bg-gray-200"></div>
<!-- Segment 4: filled if very strong -->
<div class="flex-1 h-1.5 rounded-full bg-gray-200"></div>
</div>
<p class="mt-1 text-xs text-yellow-600 font-medium">Medium strength</p>Animasi Goncangan apabila Penghantaran Tidak Sah
Menambahkan animasi goncangan ringkas pada borang yang tidak sah semasa penghantaran memberikan maklum balas pergerakan dengan serta-merta. Takrifkan bingkai utama shake tersuai dalam tailwind.config.js dan gunakannya bersama animate-shake.
Animasi goncangan terdiri daripada terjemahan mendatar pantas: 0% → -10px → 10px → -5px → 5px → 0. Cetuskannya dengan menambahkan kelas semasa penghantaran dan mengalih keluarnya selepas animasi selesai menggunakan pendengar peristiwa animationend.
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
shake: {
'0%, 100%': { transform: 'translateX(0)' },
'10%, 30%, 50%, 70%, 90%': { transform: 'translateX(-6px)' },
'20%, 40%, 60%, 80%': { transform: 'translateX(6px)' },
},
},
animation: {
shake: 'shake 0.4s ease-in-out',
},
},
},
};
// Usage:
// form.classList.add('animate-shake');
// form.addEventListener('animationend', () => form.classList.remove('animate-shake'), { once: true });Masa Pengesahan Masa Nyata
Mencetuskan pengesahan pada masa yang tepat sama pentingnya dengan gaya visual. Mengesahkan pada setiap ketukan kekunci (oninput) menjengkelkan pengguna yang belum selesai menaip. Mengesahkan hanya semasa penghantaran pula bermakna pengguna tidak melihat maklum balas sehingga mereka selesai mengisi seluruh borang.
Amalan terbaik ialah mengesahkan apabila fokus keluar (onblur): tunjukkan ralat apabila pengguna meninggalkan medan. Setelah ralat dipaparkan, tukar kepada oninput untuk medan itu supaya ralat hilang sebaik sahaja dibetulkan, lalu memberikan maklum balas positif dengan serta-merta.
<script>
let hasError = false;
const input = document.getElementById('live-email');
const errorEl = document.getElementById('live-error');
// Validate on blur (leaving the field)
input.addEventListener('blur', () => {
if (!input.value.includes('@')) {
hasError = true;
input.classList.add('border-red-500');
errorEl.classList.remove('hidden');
}
});
// Once error shown, clear in real time
input.addEventListener('input', () => {
if (hasError && input.value.includes('@')) {
hasError = false;
input.classList.remove('border-red-500');
input.classList.add('border-green-500');
errorEl.classList.add('hidden');
}
});
</script>Pengumuman Ralat yang Boleh Diakses
Pembaca skrin tidak mengumumkan mesej ralat yang disuntik secara dinamik secara automatik melainkan elemen tersebut mempunyai role='alert' atau aria-live='polite'. Menambahkan role='alert' pada perenggan mesej ralat menyebabkan pembaca skrin berhenti seketika dan membaca mesej sebaik sahaja mesej itu muncul dalam DOM.
Gunakan aria-invalid='true' pada input yang tidak sah dan aria-describedby yang menunjuk kepada ID mesej ralat supaya pembaca skrin mengumumkan konteks apabila medan menerima fokus.
<div class="flex flex-col gap-1">
<label for="acc-email" class="text-sm font-medium text-gray-700">Email</label>
<input
id="acc-email"
type="email"
aria-invalid="true"
aria-describedby="acc-email-error"
class="w-full px-3 py-2 text-sm border border-red-500 rounded-lg
focus:outline-none focus:ring-2 focus:ring-red-500"
/>
<!-- role=alert makes screen readers announce this when it appears -->
<p id="acc-email-error" role="alert" class="flex items-center gap-1 mt-1 text-xs text-red-600">
<svg class="w-3.5 h-3.5" 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>
Please enter a valid email address.
</p>
</div>Semakan Pantas
Uji pemahaman anda tentang konsep Penguasaan Tailwind CSS daripada pelajaran ini.
Ulang Kaji Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: input dalam keadaan ralat menggunakan border-red-500 bersama focus:ring-red-500 dan rona bg-red-50; mesej ralat muncul di bawah medan dengan text-xs text-red-600 dan ikon amaran; dan kebolehcapaian memerlukan aria-invalid, aria-describedby dan role='alert' supaya pembaca skrin mengumumkan ralat secara automatik. Seterusnya, kita akan membina komponen dialog modal.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Pengesahan dan Keadaan Ralat” percuma?
Ya — teks penuh “Pengesahan dan Keadaan Ralat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pengesahan dan Keadaan Ralat”?
Paparkan keadaan berjaya dan ralat pada medan borang menggunakan kelas warna bersyarat untuk sempadan, gelang dan teks bantuan. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Pengesahan dan Keadaan Ralat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menggayakan Medan Teks dan Kawasan Teks
- Menu Pilihan dan Kotak Tandaan
- Corak Tataletak Borang
- Pengesahan dan Keadaan Ralat