Pengesahan bentuk di sisi pelanggan

Pengesahan borang pelanggan adalah penting - ia menjimatkan masa dan jalur lebar dan menyediakan lebih banyak pilihan untuk menunjukkan di mana pengguna membuat kesilapan semasa mengisi borang. Bahawa dikatakan, ini tidak bermakna anda tidak memerlukan pengesahan sisi pelayan. Pengguna yang melawat laman web anda mungkin telah menggunakan pelayar lama atau JavaScript yang dilumpuhkan, yang akan memecahkan pengesahan pelanggan sahaja. Pengesahan sisi pelanggan dan pelayan melengkapi satu sama lain, jadi mereka tidak boleh digunakan secara bebas.

Mengapa pengesahan pelanggan penting?

Terdapat dua alasan yang baik untuk menggunakan pengesahan pelanggan:

1. Ini adalah cara yang cepat untuk mengesahkan: Jika ada masalah, amaran akan dicetuskan apabila borang diserahkan.

2. 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 pengesahan utama

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

Semasa memaparkan semua kesilapan pada masa yang sama diperlukan untuk pengesahan sisi pelayan, cara yang lebih baik untuk mengesahkan klien adalah untuk memaparkan satu ralat pada satu masa. Ini memungkinkan untuk menyerlahkan hanya bidang yang telah diisi dengan tidak betul, yang seterusnya memudahkan pelawat mengubahsuai dan menyerahkan borang dengan jayanya. Jika anda membentangkan semua kesilapan kepada pengguna pada masa yang sama, kebanyakan orang akan cuba mengingati dan membetulkannya sekaligus, dan bukannya cuba menyerahkan semula selepas setiap pembetulan.

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('请输入电话号码，仅限数字'); <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('请输入电话号码，仅限数字'); <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('请输入电话号码，仅限数字'); <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?

Cara lain untuk mengesahkan nombor adalah menghendaki mereka berada dalam julat tertentu. Untuk membuat fungsi melaksanakan pengesahan sedemikian, hanya ubah garis cek ke:

<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('请输入电话号码，仅限数字'); <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 - &&).

seperti yang anda dapat lihat, fungsi pengesahan rentetan kelihatan lebih kurang sama;

<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.

Sebaliknya, pengesahan sisi pelayan dilakukan pada pelayan selepas menyerahkan data borang. Ia lebih selamat kerana pengguna tidak dapat memintasnya. Walau bagaimanapun, ia memerlukan perjalanan bulat ke pelayan, yang boleh menjejaskan prestasi dan pengalaman pengguna. Oleh itu, adalah disyorkan untuk menggunakan pengesahan pelanggan dan pelayan untuk pengalaman keselamatan dan pengguna terbaik.

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!