hujung hadapan web
tutorial js
Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?
Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?
Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?
Sebagai salah satu elemen asas pembangunan web, borang memainkan peranan penting dalam halaman web. Apabila pengguna berinteraksi dengan halaman web, melalui borang, pengguna boleh memasukkan, menyerahkan dan mengubah suai data. Walau bagaimanapun, data yang dimasukkan oleh pengguna tidak selalu tepat, jadi ia perlu menambah fungsi pengesahan borang pada halaman web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan pengesahan borang web dan memberikan contoh kod khusus.
- Dapatkan elemen borang
Sebelum memulakan pengesahan borang, kita perlu mendapatkan rujukan kepada elemen borang terlebih dahulu. Melalui kaedah document.querySelector() atau document.getElementById(), kita boleh mendapatkan elemen borang yang sepadan dengan mudah.
const form = document.querySelector('#myForm');- Mendengar acara penyerahan borang
Dalam borang, kami selalunya perlu mengesahkan apabila pengguna mengklik butang hantar dan menghalang kelakuan penyerahan lalai borang. Untuk melaksanakan fungsi ini, kita perlu mendengar acara penyerahan borang dan melaksanakan operasi pengesahan borang dalam fungsi pengendali acara.
form.addEventListener('submit', function(event) {
event.preventDefault();
// 在这里进行表单验证
});- Logik pengesahan borang
Logik pengesahan borang boleh direka bentuk mengikut keperluan khusus termasuk medan yang diperlukan, sekatan panjang, padanan format, dsb. Kami boleh melaksanakan pengesahan ini menggunakan sifat bentuk dan kaedah yang disediakan oleh JavaScript.
- Pengesahan medan yang diperlukan
Untuk memastikan input pengguna tidak kosong, kami boleh menggunakan atribut nilai untuk pengesahan. Dengan menentukan sama ada nilai kotak input ialah rentetan kosong, anda boleh menentukan sama ada pengguna telah memasukkan kandungan.
const input = document.querySelector('#username');
if (input.value === '') {
// 输入为空
}- Pengesahan had panjang
Untuk kotak teks yang perlu mengehadkan panjang input, kami boleh menggunakan atribut panjang untuk mengesahkan sama ada kandungan input memenuhi keperluan .
const input = document.querySelector('#password');
if (input.value.length < 6) {
// 输入长度不足
}- Format Pengesahan Padanan
Kadangkala, kami perlu memastikan kandungan yang dimasukkan oleh pengguna mematuhi format tertentu. Ungkapan biasa boleh digunakan untuk pengesahan pemadanan format.
const input = document.querySelector('#email');
const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
if (!emailPattern.test(input.value)) {
// 格式不匹配
}- Error prompt
Apabila terdapat ralat dalam input pengguna, kami perlu memaparkan mesej ralat kepada pengguna. Kita boleh melakukan ini dengan memasukkan maklumat ralat ke dalam DOM.
const errorDiv = document.createElement('div');
errorDiv.textContent = '输入错误';
form.insertBefore(errorDiv, form.firstElementChild);Kod sampel lengkap adalah seperti berikut:
const form = document.querySelector('#myForm');
const input = document.querySelector('#username');
const emailPattern = /^w+@[a-zA-Z_]+?.[a-zA-Z]{2,3}$/;
form.addEventListener('submit', function(event) {
event.preventDefault();
//必填字段验证
if (input.value === '') {
showError('用户名不能为空');
return;
}
//格式匹配验证
if (!emailPattern.test(input.value)) {
showError('请输入有效的电子邮件地址');
return;
}
//表单验证通过，提交表单
form.submit();
});
function showError(message) {
const errorDiv = document.createElement('div');
errorDiv.textContent = message;
form.insertBefore(errorDiv, form.firstElementChild);
}Di atas adalah contoh mudah menggunakan JavaScript untuk melaksanakan fungsi pengesahan borang web. Melalui langkah di atas, kami boleh menambah fungsi pengesahan pada borang web dengan mudah dan memberikan pengguna mesej ralat yang sepadan untuk meningkatkan pengalaman pengguna dan ketepatan data.
Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan pengesahan borang web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Stock Market GPT
Penyelidikan pelaburan dikuasakan AI untuk keputusan yang lebih bijak
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei?
Mar 24, 2024 am 11:27 AM
Bagaimana untuk melaksanakan log masuk WeChat dwi pada telefon mudah alih Huawei? Dengan kebangkitan media sosial, WeChat telah menjadi salah satu alat komunikasi yang sangat diperlukan dalam kehidupan seharian orang ramai. Walau bagaimanapun, ramai orang mungkin menghadapi masalah: log masuk ke beberapa akaun WeChat pada masa yang sama pada telefon mudah alih yang sama. Bagi pengguna telefon mudah alih Huawei, tidak sukar untuk mencapai log masuk WeChat dwi Artikel ini akan memperkenalkan cara mencapai log masuk WeChat dwi pada telefon mudah alih Huawei. Pertama sekali, sistem EMUI yang disertakan dengan telefon mudah alih Huawei menyediakan fungsi yang sangat mudah - pembukaan dua aplikasi. Melalui fungsi pembukaan dwi aplikasi, pengguna boleh serentak
Panduan Pengaturcaraan PHP: Kaedah untuk Melaksanakan Jujukan Fibonacci
Mar 20, 2024 pm 04:54 PM
Bahasa pengaturcaraan PHP ialah alat yang berkuasa untuk pembangunan web, yang mampu menyokong pelbagai logik dan algoritma pengaturcaraan yang berbeza. Antaranya, melaksanakan jujukan Fibonacci adalah masalah pengaturcaraan biasa dan klasik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan bahasa pengaturcaraan PHP untuk melaksanakan jujukan Fibonacci, dan melampirkan contoh kod tertentu. Jujukan Fibonacci ialah jujukan matematik yang ditakrifkan seperti berikut: unsur pertama dan kedua bagi jujukan ialah 1, dan bermula dari unsur ketiga, nilai setiap unsur adalah sama dengan jumlah dua unsur sebelumnya. Beberapa elemen pertama urutan
Panduan Pelaksanaan Keperluan Permainan PHP
Mar 11, 2024 am 08:45 AM
Panduan Pelaksanaan Keperluan Permainan PHP Dengan populariti dan perkembangan Internet, pasaran permainan web menjadi semakin popular. Ramai pembangun berharap untuk menggunakan bahasa PHP untuk membangunkan permainan web mereka sendiri, dan melaksanakan keperluan permainan adalah langkah utama. Artikel ini akan memperkenalkan cara menggunakan bahasa PHP untuk melaksanakan keperluan permainan biasa dan menyediakan contoh kod khusus. 1. Cipta watak permainan Dalam permainan web, watak permainan adalah elemen yang sangat penting. Kita perlu mentakrifkan atribut watak permainan, seperti nama, tahap, nilai pengalaman, dll., dan menyediakan kaedah untuk mengendalikannya
Kuasai cara Golang mendayakan kemungkinan pembangunan permainan
Mar 16, 2024 pm 12:57 PM
Dalam bidang pembangunan perisian hari ini, Golang (bahasa Go), sebagai bahasa pengaturcaraan yang cekap, ringkas dan sangat bersesuaian, semakin digemari oleh pembangun. Perpustakaan standardnya yang kaya dan ciri-ciri konkurensi yang cekap menjadikannya pilihan berprofil tinggi dalam bidang pembangunan permainan. Artikel ini akan meneroka cara menggunakan Golang untuk pembangunan permainan dan menunjukkan kemungkinan besarnya melalui contoh kod tertentu. 1. Kelebihan Golang dalam pembangunan permainan Sebagai bahasa yang ditaip secara statik, Golang digunakan dalam membina sistem permainan berskala besar.
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei
Mar 24, 2024 pm 06:03 PM
Bagaimana untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Dengan populariti perisian sosial dan penekanan yang semakin meningkat terhadap privasi dan keselamatan orang ramai, fungsi klon WeChat telah beransur-ansur menjadi tumpuan perhatian. Fungsi klon WeChat boleh membantu pengguna log masuk ke berbilang akaun WeChat pada telefon mudah alih yang sama pada masa yang sama, menjadikannya lebih mudah untuk diurus dan digunakan. Tidak sukar untuk melaksanakan fungsi klon WeChat pada telefon mudah alih Huawei Anda hanya perlu mengikuti langkah berikut. Langkah 1: Pastikan versi sistem telefon mudah alih dan versi WeChat memenuhi keperluan Pertama, pastikan versi sistem telefon mudah alih Huawei anda telah dikemas kini kepada versi terkini, serta Apl WeChat.
Menggunakan PHP untuk melaksanakan SaaS: analisis komprehensif
Mar 07, 2024 pm 10:18 PM
Saya benar-benar minta maaf kerana saya tidak dapat memberikan panduan pengaturcaraan masa nyata, tetapi saya boleh memberikan anda contoh kod untuk memberi anda pemahaman yang lebih baik tentang cara menggunakan PHP untuk melaksanakan SaaS. Berikut ialah artikel dalam 1,500 perkataan, bertajuk "Menggunakan PHP untuk melaksanakan SaaS: Analisis komprehensif." Dalam era maklumat hari ini, SaaS (Perisian sebagai Perkhidmatan) telah menjadi cara arus perdana bagi perusahaan dan individu untuk menggunakan perisian. Ia menyediakan cara yang lebih fleksibel dan mudah untuk mengakses perisian. Dengan SaaS, pengguna tidak perlu berada di premis
Fahami kaedah pelaksanaan dan kelebihan menyekat dalam bahasa Go
Mar 24, 2024 am 08:36 AM
Bahasa Go ialah bahasa pengaturcaraan dengan ciri konkurensi yang sangat berkuasa Ia menggunakan konsep goroutine untuk mencapai konkurensi, dan juga menyediakan pelbagai alat dan kaedah untuk menangani penyekatan. Dalam bahasa Go, kaedah pelaksanaan dan kelebihan menyekat adalah perkara penting yang perlu kita fahami. Artikel ini akan memperkenalkan kaedah pelaksanaan menyekat dalam bahasa Go dan kelebihannya serta memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. Kaedah pelaksanaan menyekat Dalam bahasa Go, menyekat boleh dilaksanakan dalam pelbagai cara, termasuk saluran,
Bagaimana untuk melaksanakan fungsi pemasaan dalam PHP? Terokai penyelesaian
Mar 21, 2024 am 09:39 AM
Bagaimana untuk melaksanakan fungsi pemasaan dalam PHP? Untuk meneroka penyelesaian, anda memerlukan contoh kod khusus Dalam pembangunan web, anda sering menghadapi situasi di mana anda perlu melakukan tugas tertentu dengan kerap, seperti menghantar e-mel dengan kerap, membersihkan cache dengan kerap, membuat sandaran data dengan kerap, dsb. Dalam PHP, melaksanakan fungsi pemasaan boleh dicapai dalam pelbagai cara, dan artikel ini akan meneroka beberapa penyelesaian dan menyediakan contoh kod khusus. 1. Gunakan CronJob CronJob ialah fungsi yang digunakan untuk melaksanakan tugas dengan kerap dalam sistem seperti Unix. Dengan menetapkan C
