Mengapa pengesahan pelanggan penting?
Terdapat dua alasan yang baik untuk menggunakan pengesahan pelanggan:
- Ini adalah cara yang cepat untuk mengesahkan: Jika ada masalah, amaran akan dicetuskan apabila borang diserahkan.
- anda boleh memaparkan hanya satu ralat pada satu masa dan fokus pada medan yang salah untuk membantu memastikan pengguna mengisi semua butiran yang anda perlukan dengan betul.
Dua kaedah utama pengesahan bentuk klien adalah:
- Tunjukkan ralat pada satu masa, fokus pada bidang yang bermasalah
- Tunjukkan semua kesilapan pada masa yang sama, gaya pengesahan sisi pelayan
Memandangkan kelebihan ini, saya hanya akan memberi tumpuan kepada kaedah pengesahan yang menunjukkan satu ralat pada satu masa.
bagaimana untuk mengesahkan borang
Sebagai contoh, coretan kod berikut:
<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
return false; <br>
} <br>
<br>
return true; <br>
} <br>
<br><br></code> Tel: apa masalahnya? Nah, jika anda menambah bentuk lain sebelum ini, kod akan cuba mengesahkan borang yang salah.
cara yang lebih baik adalah memasukkan nama borang:
onSubmit = "Return ValidAtemyForm ();" & gt;
<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value) ?<br>
? ? ? ?!= document.forms.myForm.phone.value) { <br><br></code>
jadi mari kita padamkan nama borang:
Kaedah terakhir ini menggunakan objek ini, yang selalu menunjuk kepada objek semasa. Ini menjadikan kod kami lebih mudah alih dan menjimatkan masa menaip.
<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code>
bagaimana menjadikan kehidupan pengunjung lebih mudah sekarang? Mari kita fokus pada bidang yang mencetuskan kesilapan, dan bukannya membiarkan mereka melihatnya sendiri.
Dengan perubahan ini, penyemak imbas akan memberi tumpuan kepada mengisi bidang yang salah dan bahkan akan memilih teks untuk pelawat. Ini juga akan berlaku secara automatik jika menatal diperlukan.
<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code>
Ok, ini hebat, tetapi adakah anda fikir terdapat sedikit kod untuk setiap bidang? Bagaimana jika kita membuat perpustakaan fungsi mudah yang dapat menjimatkan banyak menaip dan memuat turun masa di halaman? Nah, seterusnya kami akan melakukan ini - kami akan menentukan fungsi asas kami untuk menjadikan kod pengesahan lebih pendek.
<code><br>
function validateMyForm() { <br>
if (parseInt(document.forms[0].phone.value) ?<br>
? ? ? ?!= document.forms[0].phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
return false; <br>
} <br>
<br>
return true; <br>
} <br>
<br><br></code>
Fungsi ini melakukan pengesahan mudah nombor - ia memeriksa sama ada medan itu hanya mengandungi nombor dan pilihan, sama ada dalam julat tertentu. Anda akan melihat bahawa kod ini meluluskan mesej ralat sebagai parameter. Untuk menggunakan fungsi seperti ini, kita pada dasarnya boleh menambahkannya ke pengendali onsubmit seperti berikut:
<code>function validateMyForm() { <br>
if (parseInt(document.forms.myForm.phone.value) ?<br>
? ? ? ?!= document.forms.myForm.phone.value) { <br><br></code>
onSubmit = "Return validAteNumber (this.phone,
'Sila masukkan nombor telefon, hanya angka', 5, 10); "& gt; panggilnya seperti ini, ia akan menyemak sama ada nombor telefon adalah angka dan lebih lama daripada 5 digit dan kurang daripada 10 digit. Perhatikan bagaimana untuk lulus objek telefon sebagai parameter?
<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br><br></code> Jika anda ingin memohon pelbagai cek ke dalam borang, anda boleh membenamkan pelbagai peraturan dalam pengendali onsubmit. Sebagai contoh, bayangkan bahawa sebagai tambahan kepada nombor telefon, kami juga perlu memasukkan nama pertama dan terakhir kami:
<code>function validateMyForm(form) { <br>
if (parseInt(form.phone.value) != form.phone.value) { <br>
alert('請(qǐng)輸入電話號(hào)碼，僅限數(shù)字'); <br>
form.phone.focus(); <br>
form.phone.select(); <br>
return false; <br>
}</code> onSubmit = "return (
validAteNumber (this.phone, 'sila masukkan telefon
Nombor, nombor sahaja ', 5, 10) &&
validateString (this.firstName, 'sila masukkan
Nama anda ', 3, 15) &&
validateString (this.lastName, 'sila masukkan
Nama belakang anda ', 3, 15)
); "& gt; Kod memerlukan semua peraturan pengesahan dinilai sebagai benar (menggunakan logik dan - &&).
<code>function validateNumber(field, msg, min, max) { ?<br>
if (!min) { min = 0 } ?<br>
if (!max) { max = 255 } ?<br>
?<br>
if ( (parseInt(field.value) != field.value) || ? <br>
? ? ? ?field.value.length max) { ?<br>
alert(msg); ?<br>
field.focus(); ?<br>
field.select(); ?<br>
return false; ?<br>
} ?<br>
?<br>
return true; ?<br>
}</code>
Bidang biasa diperlukan dalam banyak bentuk di web, iaitu alamat e -mel pengguna. Saya telah melihat banyak fungsi yang melakukan ini, tetapi biasanya cara yang paling mudah dan paling mudah untuk mengesahkan alamat e -mel adalah dengan menggunakan ungkapan biasa.
Sekarang kita akan melanjutkan fungsi kita supaya ia dapat menentukan bidang sebagai pilihan.
Untuk mengesahkan e -mel yang diperlukan, anda harus memanggilnya sebagai:
<code></code>
jika anda mahu menetapkannya kepada pilihan:
<code>if ((parseInt(field.value) != field.value) || ? <br>
field.value max) {</code>
JavaScript tidak boleh digunakan untuk pengesahan sahaja, tetapi ia boleh membantu jika anda memilikinya. Semakin padat kod yang anda benamkan ke HTML, lebih baik - ia menjimatkan masa muat turun dan enjin carian akan menyukai anda!
<code></code>
Soalan Lazim mengenai Pengesahan Borang (FAQ)
Apakah perbezaan antara pengesahan klien dan pengesahan sisi pelayan?
Pengesahan pelanggan dilakukan dalam penyemak imbas pengguna menggunakan JavaScript sebelum data borang dihantar ke pelayan. Ia memberikan maklum balas segera dan meningkatkan pengalaman pengguna. Walau bagaimanapun, ia boleh dilangkau dengan melumpuhkan JavaScript atau memanipulasi kod, jadi ia tidak sepenuhnya selamat.
Bagaimana untuk melaksanakan pengesahan borang dalam PHP?
PHP menyediakan pelbagai fungsi pengesahan bentuk. Sebagai contoh, anda boleh menggunakan fungsi filter_var () dengan penapis yang berbeza untuk mengesahkan dan membersihkan data input. Berikut adalah contoh mudah untuk mengesahkan alamat e -mel:
$ email = $ _post ["e -mel"]; jika (! filter_var ($ e -mel, filter_validate_email)) { echo "format e -mel tidak sah"; } Kod ini memeriksa jika alamat e -mel yang dikemukakan diformat dengan betul. Jika tidak, mesej ralat dipaparkan.
Apakah beberapa teknik pengesahan biasa?
Beberapa teknik pengesahan biasa termasuk medan yang diperlukan, had panjang, pencocokan corak, dan pemeriksaan jenis data. Bidang yang diperlukan memastikan bahawa pengguna mengisi semua maklumat yang diperlukan. Had Panjang Hadkan bilangan aksara yang boleh dimasukkan. Pemeriksaan padanan corak jika input sepadan dengan corak tertentu, seperti alamat e -mel atau nombor telefon. Pemeriksaan jenis data memastikan bahawa input adalah jenis yang betul, seperti nombor atau tarikh.
Bagaimana untuk memaparkan mesej ralat pengesahan?
Anda boleh menggunakan JavaScript untuk pengesahan klien atau pengesahan sisi pelayan menggunakan PHP untuk memaparkan mesej ralat pengesahan. Dalam JavaScript, anda boleh menggunakan kaedah setCustomValidity () untuk menyediakan mesej pengesahan tersuai. Dalam PHP, anda boleh menyimpan mesej ralat dalam pembolehubah dan memaparkannya dalam bentuk.
Bagaimana untuk mengesahkan kotak semak?
anda boleh mengesahkan kotak semak dengan menyemak sama ada kotak semak dipilih. Dalam JavaScript, anda boleh menggunakan harta yang diperiksa. Dalam PHP, anda boleh menyemak sama ada nilai kotak semak muncul dalam $ _post atau $ _get.
Bagaimana untuk mengesahkan senarai drop-down?
anda boleh mengesahkan senarai drop-down dengan menyemak sama ada pilihan yang sah dipilih. Dalam JavaScript, anda boleh menggunakan harta yang dipilih. Dalam PHP, anda boleh menyemak sama ada nilai yang dipilih berada dalam pelbagai nilai yang sah.
bagaimana mengesahkan butang radio?
Anda boleh mengesahkan butang radio dengan memeriksa sama ada salah satu pilihan dipilih. Dalam JavaScript, anda boleh gelung melalui butang radio dan menggunakan harta yang diperiksa. Dalam PHP, anda boleh menyemak sama ada nilai butang radio muncul dalam $ _post atau $ _get.
Bagaimana untuk mengesahkan tarikh?
anda boleh mengesahkan tarikh dengan menyemak sama ada tarikh diformat dengan betul dan jika ia adalah tarikh sebenar. Dalam JavaScript, anda boleh menggunakan objek Tarikh. Dalam PHP, anda boleh menggunakan fungsi checkDate ().
Bagaimana untuk mengesahkan muat naik fail?
anda boleh mengesahkan muat naik fail dengan menyemak saiz fail, jenis fail, dan sambungan fail. Dalam JavaScript, anda boleh menggunakan harta fail. Dalam PHP, anda boleh menggunakan array $ _files.
Bagaimana untuk mencegah suntikan SQL?
Anda boleh menghalang suntikan SQL menggunakan pernyataan pra -diproses atau pertanyaan parameter yang memisahkan kod SQL dari data. Ini menghalang data daripada ditafsirkan sebagai kod. Dalam PHP, anda boleh menggunakan sambungan PDO atau MySQLI untuk melaksanakan pernyataan pra -proses.
Atas ialah kandungan terperinci Pengesahan bentuk di sisi pelanggan. 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.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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 membuat permintaan HTTP di node.js?
Jul 13, 2025 am 02:18 AM
Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah
Jenis Data JavaScript: Rujukan primitif vs
Jul 13, 2025 am 02:43 AM
Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.
Objek Masa JavaScript, seseorang membina eactexe, laman web lebih cepat di Google Chrome, dll.
Jul 08, 2025 pm 02:27 PM
Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle
Apakah API cache dan bagaimana ia digunakan dengan pekerja perkhidmatan?
Jul 08, 2025 am 02:43 AM
CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
Mengendalikan Janji: Chaining, Pengendalian Kesalahan, dan Janji Gabungan di JavaScript
Jul 08, 2025 am 02:40 AM
Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)
Memanfaatkan array.prototype Kaedah untuk manipulasi data dalam javascript
Jul 06, 2025 am 02:36 AM
Kaedah terbina dalam JavaScript seperti .map (), .filter () dan .reduce () dapat memudahkan pemprosesan data; 1) .map () digunakan untuk menukar elemen satu hingga satu untuk menghasilkan tatasusunan baru; 2) .filter () digunakan untuk menapis elemen mengikut keadaan; 3) .reduce () digunakan untuk mengagregatkan data sebagai nilai tunggal; Penyalahgunaan harus dielakkan apabila digunakan, mengakibatkan kesan sampingan atau masalah prestasi.
JS Roundup: menyelam jauh ke dalam gelung acara JavaScript
Jul 08, 2025 am 02:24 AM
Gelung acara JavaScript menguruskan operasi tak segerak dengan menyelaraskan susunan panggilan, webapis, dan barisan tugas. 1. Stack panggilan melaksanakan kod segerak, dan ketika menghadapi tugas -tugas yang tidak segerak, ia diserahkan kepada Webapi untuk diproses; 2. Selepas Webapi melengkapkan tugas di latar belakang, ia meletakkan panggil balik ke dalam barisan yang sama (tugas makro atau tugas mikro); 3. Loop acara memeriksa sama ada timbunan panggilan kosong. Jika ia kosong, panggilan balik diambil dari barisan dan ditolak ke dalam tumpukan panggilan untuk pelaksanaan; 4. Tugas -tugas mikro (seperti janji. 5. Memahami gelung acara membantu mengelakkan menyekat benang utama dan mengoptimumkan pesanan pelaksanaan kod.
Memahami acara menggelegak dan menangkap dalam acara DOM JavaScript
Jul 08, 2025 am 02:36 AM
Gelembung peristiwa menyebarkan dari elemen sasaran ke luar ke nod nenek moyang, sementara penangkapan peristiwa menyebarkan dari lapisan luar ke dalam ke elemen sasaran. 1. Bubbles Acara: Selepas mengklik elemen kanak -kanak, acara itu mencetuskan pendengar elemen induk ke atas. Sebagai contoh, selepas mengklik butang, ia mengeluarkan anak -anak terlebih dahulu, dan kemudian ParentClicked. 2. Tangkap Acara: Tetapkan parameter ketiga menjadi benar, supaya pendengar dilaksanakan di peringkat penangkapan, seperti mencetuskan pendengar penangkapan elemen induk sebelum mengklik butang. 3. Penggunaan praktikal termasuk pengurusan bersatu peristiwa elemen kanak -kanak, pemprosesan pemintasan dan pengoptimuman prestasi. 4. Aliran acara DOM dibahagikan kepada tiga peringkat: menangkap, sasaran dan gelembung, dan pendengar lalai dilaksanakan di peringkat gelembung.
