Home-theater-designers
JavaScript adalah salah satu bahasa pengaturcaraan yang paling popular dan serba boleh yang anda boleh mulakan hari ini. Bahasa pengaturcaraan ini dengan tepat dikatakan sebagai bahasa web dan penting untuk menambahkan interaktiviti ke laman web anda.
Elemen bentuk adalah salah satu elemen HTML yang paling banyak digunakan di laman web. Bentuk-bentuk ini mengambil input dari pengguna dan memprosesnya di penyemak imbas atau pelayan. Walau bagaimanapun, penting untuk mengesahkan input ini untuk mengatasi masalah keselamatan dan bug yang tidak diingini.
Memahami Manipulasi DOM
Sebelum kita melaksanakan pengesahan bentuk sisi klien dengan JavaScript, penting untuk memahami Model Objek Dokumen, yang biasanya dikenal sebagai 'DOM'. DOM adalah API standard yang membolehkan JavaScript berinteraksi dengan elemen di laman web HTML.
Ketahui Lebih Lanjut: Wira Tersembunyi Laman Web: Memahami DOM
Untuk menambahkan pendengar acara dan mendapatkan input pengguna, anda perlu memahami asas manipulasi DOM. Berikut adalah contoh yang menerangkan bagaimana anda boleh mengubah kandungan halaman web menggunakan DOM API dan JavaScript:
Document
const paragraph = document.getElementById('parapgraph');
paragraph.innerText = 'This is a paragraph tag';
Dalam kod di atas,
Sekarang setelah anda memahami asas manipulasi DOM, mari teruskan dan laksanakan pengesahan borang.
Pengesahan Borang Dengan JavaScript
Terdapat pelbagai jenis input yang boleh anda ambil dari pengguna. Jenis teks, jenis e-mel, jenis kata laluan, butang radio, dan kotak centang adalah beberapa yang paling biasa yang mungkin anda hadapi. Oleh kerana sebilangan besar jenis input ini, anda perlu menggunakan logik yang berbeza untuk mengesahkan masing-masing.
Sebelum membuat pengesahan, mari luangkan sedikit masa untuk memahami bentuk HTML dan kepentingannya. Bentuk HTML adalah salah satu cara utama anda berinteraksi dengan laman web kerana ia membolehkan anda memasukkan data anda, menerapkan perubahan, memanggil munculan, menghantar maklumat ke pelayan, dan banyak lagi.
cara melihat tajuk video youtube yang dipadam
HTML elemen digunakan untuk membuat bentuk yang berhadapan dengan pengguna ini. Inilah cara anda dapat mengesahkan input borang HTML:
1. Pengesahan E-mel
Sama ada anda membina sistem pengesahan atau hanya mengumpulkan e-mel pengguna untuk buletin anda, penting untuk mengesahkan e-mel tersebut sebelum anda dapat menyimpannya di pangkalan data atau memprosesnya. Untuk memeriksa sama ada e-mel memenuhi semua syarat yang diperlukan, anda boleh menggunakan a ekspresi biasa .
HTML:
JavaScript:
const emailInput = document.getElementById('email');
const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
if (!emailInput.value.match(emailRegex)) {
alert('Invalid email address.');
}2. Pengesahan Kata Laluan
Kata laluan adalah sekeping data penting yang memerlukan jenis pengesahan khas untuk memastikan keselamatannya. Pertimbangkan borang pendaftaran yang mempunyai dua bidang: medan kata laluan dan sahkan kata laluan. Untuk mengesahkan pasangan input ini, berikut adalah beberapa perkara yang perlu anda pertimbangkan:
- Kata laluan mesti lebih daripada 6 aksara.
- Nilai kata laluan dan medan pengesahan kata laluan mestilah sama.
HTML:
JavaScript:
const password = document.getElementById('password').value;
const confirmPassword = document.getElementById('confirm-password').value;
if (password.value !== confirmPassword.value) {
alert('Entered passwords do not match');
}
if (password.length <6) {
alert('Password must be more than 6 characters long')
}3. Pengesahan Input Radio
Input radio HTML adalah jenis elemen kawalan grafik khas yang membolehkan pengguna memilih hanya satu daripada satu set pilihan yang saling eksklusif. Contoh penggunaan input seperti ini adalah untuk memilih jantina. Untuk mengesahkan input tersebut, anda perlu memeriksa sama ada sekurang-kurangnya salah satu daripadanya dipilih.
Ini dapat dicapai dengan menggunakan pengendali logik seperti DAN ( && ) dan tidak ( ! ) pengendali dengan cara ini:
HTML:
Male
Female
Others
JavaScript:
const genders = document.getElementsByName('gender');
const validForm = false;
let i = 0;
while (!validForm && i if (radios[i].checked) validForm = true;
i++;
}
if (!validForm) alert('Must check some option!'); 4. Pilih Pengesahan Input
The Elemen HTML digunakan untuk membuat senarai drop-down. The tag di dalam elemen menentukan pilihan yang ada dalam senarai juntai bawah. Setiap daripada ini tag mempunyai atribut nilai yang berkaitan dengannya.
bagaimana saya menukar akaun google lalai saya di chrome
Untuk pilihan lalai atau awal, anda dapat menetapkan nilainya menjadi rentetan kosong sehingga akan dianggap sebagai pilihan yang tidak sah. Untuk semua pilihan lain, tetapkan atribut nilai yang sesuai. Berikut adalah contoh bagaimana anda boleh mengesahkan a elemen input:
HTML:
Select One
Mr
Mrs
Ms
JavaScript:
bolehkah anda memuat turun episod di hulu
const title = document.getElementById('title');
if (title.value = '') {
alert('Please select a title');
}5. Pengesahan Kotak Centang
Elemen input dari kotak centang jenis diberikan secara lalai sebagai kotak yang dicentang atau dicentang ketika diaktifkan. Kotak pilihan membolehkan anda memilih nilai tunggal untuk dihantar dalam borang. Kotak pilihan adalah pilihan yang popular untuk input 'terima terma dan syarat'.
Untuk mengetahui apakah kotak centang dicentang atau tidak, Anda dapat mengakses atribut dicentang pada input kotak centang. Inilah contohnya:
HTML:
I agree to the terms and conditionsJavaScript:
const terms = document.getElementById('terms');
if (!terms.checked) {
alert('Please agree to the terms and conditions to proceed further.');
}
Pencegahan Lebih Baik Daripada Penyembuhan
Selalu disarankan untuk mengesahkan semua input yang anda terima dari pelawat untuk memberikan pengalaman yang selamat dan terjamin. Peretas selalu berusaha memasukkan data jahat ke dalam medan input untuk melakukan serangan skrip silang laman dan suntikan SQL.
Sekarang setelah anda memahami cara mengesahkan input HTML anda, mengapa tidak mencubanya dengan membuat borang dan melaksanakan strategi yang telah anda lihat di atas?
Berkongsi Berkongsi Tweet E-mel Cara Membuat Borang dalam HTMLBenarkan pengguna anda memasukkan data di laman web anda dengan borang HTML.
Baca Seterusnya Topik-topik yang berkaitan- Pengaturcaraan
- HTML
- JavaScript
- Pembangunan Web
- Tutorial Pengekodan
Nitin adalah pembangun perisian yang gemar dan pelajar kejuruteraan komputer yang mengembangkan aplikasi web menggunakan teknologi JavaScript. Dia bekerja sebagai pembangun web bebas dan suka menulis untuk Linux dan Pengaturcaraan pada masa lapang.
Lagi Dari Nitin RanganathLanggan buletin kami
Sertailah buletin kami untuk mendapatkan petua, ulasan, ebook percuma, dan tawaran eksklusif!
Klik di sini untuk melanggan