JavaScript - Forms API: A Panduan Pemula

Hai在那里，budak JavaScript masa depan! Hari ini, kita akan memulakan sebuah perjalanan menarik ke dunia borang web dan API Forms yang kuat. Jangan bimbang jika anda belum pernah menulis satu baris kod sebelum ini - saya akan menjadi panduannya yang ramah, dan kita akan menangani topik ini secara berperingkat. Jadi, ambil minuman kegemaran anda, betulkan diri, dan mari kita masuk ke dalam!

Pengenalan Borang Web

Sebelum kita melompat ke API Forms, mari berbicara tentang borang web. Anda mungkin telah bertemu ini banyak kali saat browsing internet. Ingatkan sekali lagi saat anda mendaftar akaun baru atau mengisi kajiungan online? Benar - anda telah berinteraksi dengan borang web!

Borang web seperti pekerjaan digital. Mereka membolehkan pengguna memasukkan data, yang kemudiannya boleh dihantar ke pelayan untuk diproses. Tetapi di sini adalah tempat yang menarik: dengan JavaScript, kita boleh membuat borang ini cerdas dan interaktif.

API Forms

API Forms adalah set alat yang disediakan oleh JavaScript yang membolehkan kita bekerja dengan borang dalam cara yang kuat. Itu seperti memberikan naik taraf otak kepada borang anda!

Mengakses Elemen Borang

Mari kita mulai dengan dasar. Bagaimana kita sebenarnya mengambil alih borang menggunakan JavaScript? Itu lebih mudah daripada yang anda mungkin fikirkan!

// Mengganggap kita ada borang dengan id "myForm"
let myForm = document.getElementById("myForm");

// Atau jika kita mahu mengambil semua borang di halaman
let allForms = document.forms;

Dalam contoh ini, document.getElementById("myForm") adalah seperti meminta JavaScript untuk mencari borang dengan ID "myForm" di halaman web kita. Itu seperti memanggil nama pelajar di kelas - JavaScript akan menempatkan borang khusus itu untuk kita.

Baris kedua, document.forms, memberikan kita semua borang di halaman. Itu seperti mendapatkan senarai semua pelajar di sekolah!

Mengendalikan Penyerahan Borang

Sekarang kita dapat mengakses borang kita, mari lihat bagaimana kita boleh mengendalikan apa yang terjadi saat seseorang mengirimkannya:

myForm.addEventListener("submit", function(event) {
event.preventDefault(); // Menghentikan borang dari mengirimkan secara normal
console.log("Borang dihantar!");
// Di sini anda boleh menambahkan kod untuk memproses data borang
});

Kod ini seperti menyiapkan alarm khas yang dinyalakan saat seseorang mencoba mengirimkan borang. Metode preventDefault() adalah sangat penting - itu seperti memberitahu borang, "Tunggu sebentar, jangan mengirimkan data itu sekarang. Kita mahu melakukan sesuatu dulu!"

Metode DOM Validasi Batasan

Sekarang, mari berbicara tentang memastikan data dalam borang kita benar. Ini disebut validasi, dan itu penting untuk memastikan kita mendapatkan informasi yang benar dari pengguna.

Metode checkValidity()

Salah satu metode paling berguna untuk validasi borang adalah checkValidity(). Itu seperti memiliki guru yang cepat memeriksa kerja rumah pelajar untuk memastikan bahwa segalanya dalam urusan.

let emailInput = document.getElementById("email");

emailInput.addEventListener("blur", function() {
if (!emailInput.checkValidity()) {
console.log("Sila masukkan alamat email yang sah");
}
});

Dalam contoh ini, kita memeriksa jika input email valid saat pengguna selesai mengetik (itu apa yang dimaksudkan oleh "blur" peristiwa). Jika itu tidak valid, kita catat pesan ke konsol. Dalam aplikasi nyata, anda mungkin ingin menunjukkan pesan ini ke pengguna sebagai ganti.

Metode reportValidity()

Sementara checkValidity() hanya memeriksa jika input valid, reportValidity() mengambil langkah lebih jauh. Itu tidak hanya memeriksa tetapi juga menunjukkan pesan kepada pengguna jika ada kesalahan.

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function() {
if (!myForm.reportValidity()) {
console.log("Borang ada kesalahan. Sila perbaiki mereka.");
} else {
console.log("Borang valid. Mengirimkan...");
}
});

Ini seperti memiliki guru yang tidak hanya memeriksa kerja rumah tetapi juga menulis catatan untuk pelajar tentang apa yang perlu diperbaiki.

Properti DOM Validasi Batasan

Sekarang kita telah melihat beberapa metode, mari lihat beberapa properti yang dapat membantu kita dalam validasi borang.

Properti validity

Properti validity adalah kuatong informasi tentang keadaan validitas input. Itu seperti laporan detil untuk setiap bidang borang.

let passwordInput = document.getElementById("password");

passwordInput.addEventListener("input", function() {
if (passwordInput.validity.tooShort) {
console.log("Kata laluan terlalu pendek!");
}
});

Dalam contoh ini, kita memeriksa jika kata laluan terlalu pendek setiap kali pengguna mengetik sesuatu. Itu seperti memiliki guru yang melihat ke belakang pelajar dan memberikan umpan balik segera!

Properti Properti validity

Properti validity memiliki beberapa properti sendiri, setiap satu memberitahu kita sesuatu tentang keadaan input. Mari lihat beberapa dari ini:

Properti	Keterangan
valid	true jika elemen memenuhi semua batasan validasi
valueMissing	true jika elemen memiliki atribut required tapi tanpa nilai
typeMismatch	true jika nilai tidak dalam sintaks yang diperlukan (seperti alamat email)
patternMismatch	true jika nilai tidak cocok pola yang ditentukan
tooLong	true jika nilai melebihi maxLength
tooShort	true jika nilai lebih pendek dari minLength
rangeUnderflow	true jika nilai kurang dari atribut min
rangeOverflow	true jika nilai lebih besar dari atribut max
stepMismatch	true jika nilai tidak memenuhi aturan step

Ini adalah contoh bagaimana kita mungkin menggunakan beberapa dari ini:

let ageInput = document.getElementById("age");

ageInput.addEventListener("input", function() {
if (ageInput.validity.rangeUnderflow) {
console.log("Anda mestilah sekurang-kurangnya 18 tahun!");
} else if (ageInput.validity.rangeOverflow) {
console.log("Anda yakin anda begitu tua?");
} else if (ageInput.validity.valid) {
console.log("Umur terlihat baik!");
}
});

Kod ini memeriksa jika umur yang dimasukkan terlalu rendah, terlalu tinggi, atau benar. Itu seperti Goldilocks memeriksa air payablek, tapi untuk input borang!

Kesimpulan

Dan di situ kita ada, teman-teman! Kita telah membuat langkah pertama ke dunia API Forms JavaScript. Kita telah belajar bagaimana mengakses borang, mengendalikan penyerahan, memvalidasi input, dan bahkan mendalami detil validitas input.

Ingat, menguasai konsep ini memerlukan latihan. Jangan disangkal jika itu tidak semua beresonasi segera. Seperti belajar menunggang basikal, itu mungkin wobbly pada awalnya, tapi segera anda akan berlari, membuat borang interaktif dan ramah pengguna dengan mudah!

Terus mengkod, terus belajar, dan yang paling penting, terus bersenang-senang dengan JavaScript!

Credits: Image by storyset