Akademi JavaScript · Pelajaran

Pengesahan pada Sisi Pelanggan

Sahkan input sebelum menghantarnya ke mana-mana.

Pelajaran 3 daripada 413 langkah

Pengesahan pada Sisi Pelanggan ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Mengapa Mengesahkan pada Klien

Pengesahan pada sisi klien memberikan maklum balas segera dan pengalaman yang lebih lancar. Ingatlah bahawa ini ialah kemudahan, bukannya keselamatan: sentiasa sahkan juga pada pelayan.

Mengesahkan Semasa Penghantaran

Satu corak lazim ialah menyemak medan apabila borang dihantar dan membatalkan penghantaran jika terdapat apa-apa yang tidak sah.

form.addEventListener("submit", (e) => {
  if (!isValid()) {
    e.preventDefault();
  }
});

Menyemak Medan Wajib

Potong ruang pada nilai dan tolak masukan kosong. Pemotongan ruang mengelakkan rentetan yang hanya mengandungi ruang daripada diterima.

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

Peraturan Panjang

Bandingkan panjang yang telah dipotong ruang dengan had minimum dan maksimum untuk medan seperti kata laluan.

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

Padanan Corak

Ungkapan biasa menguji format seperti bentuk alamat e-mel. Pastikan corak ringkas dan gabungkannya dengan semakan pelayan.

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

Memaparkan Mesej Ralat

Paparkan maklum balas berhampiran medan menggunakan unsur ralat khusus dan textContent supaya kekal selamat daripada XSS.

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

Mengosongkan Ralat

Tetapkan semula mesej apabila medan menjadi sah supaya ralat lama tidak terus dipaparkan.

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

Pengesahan Langsung

Sahkan pada acara input atau blur untuk memberikan maklum balas masa nyata semasa pengguna menaip atau meninggalkan medan.

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

Kebolehcapaian dengan aria-invalid

Tetapkan aria-invalid dan pautkan ralat dengan aria-describedby supaya teknologi bantuan mengumumkan masalah.

emailInput.setAttribute("aria-invalid", "true");

Memfokuskan Ralat Pertama

Apabila penghantaran gagal, alihkan fokus kepada medan pertama yang tidak sah supaya pengguna boleh membetulkannya dengan segera.

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

Sahkan Juga pada Pelayan

Pengesahan klien boleh dipintas dengan menyahdayakan JavaScript atau mereka bentuk permintaan. Anggap pelayan sebagai sumber kebenaran.

Semakan Pantas

Pemikiran keselamatan.

Jawab dalam pelajaran interaktif

Ringkasan

Pengesahan manual menyemak medan (wajib, panjang dan corak) lalu membatalkan penghantaran apabila gagal dengan preventDefault. Paparkan dan kosongkan mesej dengan selamat menggunakan textContent, lakukan pengesahan langsung pada input/blur, tingkatkan kebolehcapaian dengan aria-invalid dan fokuskan ralat pertama. Sentiasa lakukan pengesahan semula pada pelayan.

Percuma untuk bermula

Pelajari JavaScript 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: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pengesahan pada Sisi Pelanggan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Pengesahan pada Sisi Pelanggan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pengesahan pada Sisi Pelanggan”?

Sahkan input sebelum menghantarnya ke mana-mana. Anda berlatih Akademi JavaScript 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 Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript 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 3 daripada 4.

Berapa lamakah pelajaran “Pengesahan pada Sisi Pelanggan” 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 Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript 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

← Kembali ke Akademi JavaScript