Pengenalan Ke Pengesahan Masalah HTML5

Laman web dan aplikasi interaktif tidak boleh dibayangkan tanpa borang yang membolehkan kami berhubung dengan pengguna kami, dan kepada dapatkan data kami perlukan untuk memastikan transaksi lancar dengan mereka. Kita perlukan input pengguna yang sah, namun kita perlu memperolehnya dengan cara itu tidak mengecewakan pengguna kami terlalu banyak.

Walaupun kami boleh meningkatkan kebolehgunaan borang kami dengan corak reka bentuk UX yang bijak, HTML5 juga mempunyai mekanisme asli untuk pengesahan kekangan yang membolehkan kami tangkapkan kesilapan input tepat di bahagian hadapan.

Dalam siaran ini, kami akan memberi tumpuan pengesahan kekangan dibekal pelayar, dan lihat bagaimana pemaju frontend boleh input pengguna sah yang selamat menggunakan HTML5.

Kenapa Kami Perlu Pengesahan Input Front-End

Pengesahan input mempunyai dua matlamat utama. Kandungan yang kami dapat:

1. Berguna

Kita perlu data boleh guna yang boleh kita bekerjasama. Kita perlu membuat orang masuk data realistik dalam format yang betul. Sebagai contoh, tiada siapa yang hidup hari ini dilahirkan 200 tahun lalu. Mendapatkan data seperti ini mungkin kelihatan lucu pada mulanya, tetapi pada jangka panjang ia menjengkelkan, dan memaparkan pangkalan data kami dengan data tidak berguna.

2. Selamat

Apabila merujuk kepada keselamatan, ini bermakna kita perlu mengelakkan suntikan kandungan berniat jahat - sama ada sengaja atau secara tidak sengaja.

Kegunaan (mendapatkan data yang munasabah) dapat dicapai hanya pada sisi pelanggan, pasukan backend tidak boleh membantu terlalu banyak dengan ini. Untuk mencapai keselamatan, pemaju depan dan belakang perlu bekerjasama.

Jika pemaju frontend betul mengesahkan input pada sisi pelanggan, pasukan backend perlu berurusan dengan kurang kerentanan. Hacking (tapak) sering melibatkan mengemukakan data tambahan, atau data dalam format yang salah. Pemaju boleh melawan lubang keselamatan seperti ini, berjaya melawan dari front-end.

Sebagai contoh, panduan keselamatan PHP ini mengesyorkan untuk memeriksa segala yang kami dapat di sisi klien. Mereka menekankan kepentingan pengesahan masukan frontend dengan memberikan banyak contoh, seperti:

"Pengesahan input berfungsi dengan baik dengan nilai yang sangat terhad, contohnya apabila sesuatu harus menjadi integer, atau rentetan alfanumerik, atau URL HTTP."

Dalam pengesahan masukan frontend, tugas kami adalah untuk mengenakan kekangan yang munasabah pada input pengguna. Ciri pengesahan kekangan HTML5 memberi kami cara untuk berbuat demikian.

Pengesahan Masalah HTML5

Sebelum HTML5, pembangun frontend terhad kepada mengesahkan input pengguna dengan JavaScript, yang merupakan proses membebankan dan membazirkan kesilapan. Untuk meningkatkan pengesahan bentuk sisi pelanggan, HTML5 telah memperkenalkan a pengesahan kekangan algoritma yang berjalan di pelayar moden, dan memeriksa kesahihan input yang dikemukakan.

Untuk membuat penilaian, algoritma menggunakan atribut yang berkaitan dengan pengesahan unsur input, seperti , </code>, dan <code><select></code>. Jika anda ingin tahu bagaimana pengesahan kekangan berlaku langkah demi langkah dalam penyemak imbas semak dokument WhatWG ini.</p> <p>Terima kasih kerana ciri pengesahan kekangan HTML5, kita boleh melaksanakan semua <strong>tugas pengesahan masukan piawai</strong> di sisi pelanggan <strong>tanpa JavaScript, semata-mata dengan HTML5</strong>.</p> <p>Untuk melaksanakan tugas yang berkaitan dengan pengesahan yang lebih rumit, HTML5 menyediakan kami dengan <strong>API JavaScript Pengesahan Kekangan</strong> kami boleh gunakan untuk menyediakan skrip pengesahan peribadi kami.</p> <h4>Mengesahkan dengan jenis Input Semantik</h4> <p>HTML5 telah diperkenalkan <strong>jenis input semantik</strong> yang - selain daripada menunjukkan makna elemen untuk ejen pengguna - juga boleh digunakan untuk <strong>sahkan input pengguna</strong> dengan menghadkan pengguna ke format input tertentu.</p> <p>Selain jenis input yang telah wujud sebelum HTML5 (<code>teks</code>, <code>kata laluan</code>, <code>mengemukakan</code>, <code>menetapkan semula</code>, <code>radio</code>, <code>kotak semak</code>, <code>butang</code>, <code>tersembunyi</code>), kami juga boleh menggunakan yang berikut <strong>jenis input HTML5 semantik</strong>: <code>e-mel</code>,<code>tel</code>,<code>url</code>,<code>nombor</code>,<code>masa</code>,<code>Tarikh</code>,<code>masa tarikh</code>,<code>datetime-local</code>, <code>bulan</code>,<code>minggu</code>, <code>pelbagai</code>, <code>carian</code>,<code>warna</code>.</p> <p>Kami dengan selamat boleh menggunakan jenis input HTML5 dengan penyemak imbas yang lebih lama, kerana mereka akan berkelakuan sebagai <code><input type="text"></code> bidang dalam pelayar yang tidak menyokongnya.</p> <p>Mari lihat apa yang berlaku apabila pengguna memasuki jenis input yang salah. Katakanlah kami telah membuat medan input e-mel dengan kod berikut:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">Emel anda:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Apabila pengguna mengetik rentetan yang tidak menggunakan format e-mel, algoritma pengesahan kekangan <strong>tidak mengemukakan borang</strong>, dan <strong>mengembalikan mesej ralat</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>Peraturan yang sama juga digunakan untuk jenis input lain, contohnya <code>taip = "url"</code> pengguna hanya boleh menghantar input yang mengikuti format URL (bermula dengan protokol, seperti <code>http: //</code> atau <code>ftp: //</code>).</p> <p>Beberapa jenis input menggunakan reka bentuk itu <strong>tidak membenarkan pengguna memasukkan format input yang salah</strong>, sebagai contoh <code>warna</code> dan <code>pelbagai</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Warna latar belakang:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Sekiranya kita menggunakannya <code>warna</code> jenis input pengguna dikekang sama ada memilih warna dari pemetik warna atau tinggal dengan hitam lalai. Medan input ialah <strong>dikekang oleh reka bentuk</strong>, oleh itu ia tidak memberi banyak peluang untuk kesilapan pengguna.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Apabila ia sesuai, ia patut dipertimbangkan menggunakan <code><select></code> Tag HTML yang berfungsi sama dengan jenis input yang disekat oleh reka bentuk; ia membolehkan pengguna memilih dari senarai jatuh turun.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Buah kegemaran anda:</label> <select name="fruit"> <option value="apple">epal</option> <option value="pear">Pear</option> <option value="orange">Orange</option> <option value="raspberry">Raspberry</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Gunakan Atribut Pengesahan HTML5</h4> <p>Menggunakan jenis input semantik menetapkan kekangan tertentu ke atas pengguna yang dibenarkan untuk menghantar, tetapi dalam banyak kes, kita mahu pergi sedikit lagi. Ini adalah ketika <strong>atribut yang berkaitan dengan pengesahan</strong> daripada <code><input></code> tag boleh membantu kami.</p> <p>Atribut yang berkaitan dengan pengesahan adalah jenis input tertentu (mereka tidak boleh digunakan <em>semua</em> jenis) di mana mereka mengenakan lebih banyak kekangan.</p> <h5>1. <code>diperlukan</code> untuk mendapatkan input yang sah dengan segala cara</h5> <p>The <code>diperlukan</code> atribut adalah sifat pengesahan HTML yang paling terkenal. Ianya adalah <strong>atribut boolean</strong> yang bermaksud ia <strong>tidak mengambil sebarang nilai</strong>, kita hanya perlu meletakkannya di dalamnya <code><input></code> tanda jika kita mahu menggunakannya:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Jika pengguna lupa untuk memasukkan nilai ke dalam medan input yang diperlukan, penyemak imbas <strong>mengembalikan mesej ralat</strong> yang memberi amaran kepada mereka untuk mengisi bidang, dan mereka <strong>tidak boleh mengemukakan borang itu</strong> sehingga mereka telah memberikan input yang sah. Itulah sebabnya penting untuk sentiasa <strong>tandakan secara visual</strong> bidang yang diperlukan untuk pengguna.</p> <p>The <code>diperlukan</code> atribut boleh <strong>digunakan bersama-sama dengan jenis input berikut</strong>: <code>teks</code>, <code>carian</code>, <code>url</code>, <code>tel</code>, <code>e-mel</code>, <code>kata laluan</code>, <code>Tarikh</code>, <code>masa tarikh</code>, <code>datetime-local</code>, <code>bulan</code>, <code>minggu</code>,<code>masa</code>, <code>nombor</code>, <code>kotak semak</code>, <code>radio</code>, <code>fail</code>, ditambah dengan <code><textarea></code>dan <code><select></code> Tag HTML.</p> <h5>2. <code>min</code>, <code>maks</code> dan <code>langkah</code> untuk pengesahan nombor</h5> <p>The <code>min</code>, <code>maks</code> dan <code>langkah</code> ciri-ciri membolehkan kita untuk <strong>meletakkan kekangan pada medan input nombor</strong>. Mereka boleh digunakan bersama dengan <code>pelbagai</code>, <code>nombor</code>, <code>Tarikh</code>, <code>bulan</code>, <code>minggu</code>, <code>masa tarikh</code>, <code>datetime-local</code>, dan <code>masa</code> jenis input.</p> <p>The <code>min</code> dan <code>maks</code> atribut menyediakan cara yang baik dengan mudah <strong>tidak termasuk data yang tidak munasabah</strong>. Misalnya contoh di bawah ini memaksa pengguna untuk menyerahkan umur antara 18 dan 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Umur awak:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Apabila algoritma pengesahan kekangan merebak menjadi input pengguna yang lebih kecil daripada <code>min</code>, atau lebih besar daripada yang <code>maks</code> nilai, ia menghalangnya daripada mencapai backend, dan mengembalikan mesej ralat.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>The <code>langkah</code> atribut <strong>menentukan selang angka</strong> antara nilai undang-undang bidang input berangka. Sebagai contoh, jika kita mahu pengguna memilih hanya dari tahun lompat kita boleh menambah <code>langkah = "4"</code> atribut ke lapangan. Dalam contoh di bawah saya menggunakan <code>nombor</code> jenis input, kerana tidak ada <code>jenis = "tahun"</code> dalam HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Tahun Leap Kegemaran anda:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Dengan kekangan yang ditetapkan sebelum ini, pengguna hanya boleh memilih dari tahun lompat antara 1972 dan 2016 jika mereka menggunakan anak panah kecil yang datang dengan <code>nombor</code> jenis input. Mereka juga boleh menaip nilai secara manual ke dalam medan input, tetapi sekiranya ia tidak memenuhi kekangan, penyemak imbas akan mengembalikan mesej ralat.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>panjang maksimum</code> untuk pengesahan panjang teks</h5> <p>The <code>panjang maksimum</code> atribut menjadikannya mungkin <strong>tetapkan panjang aksara maksimum</strong> untuk medan input tekstual. Ia boleh digunakan bersama dengan <code>teks</code>, <code>carian</code>, <code>url</code>, <code>tel</code>, <code>e-mel</code> dan <code>kata laluan</code> jenis input, dan dengan <code><textarea></code> Tag HTML.</p> <p>The <code>panjang maksimum</code> atribut boleh menjadi penyelesaian yang sangat baik untuk bidang nombor telefon yang tidak boleh mempunyai lebih daripada sebilangan aksara, atau untuk bentuk hubungan di mana kita tidak mahu pengguna menulis lebih daripada panjang tertentu.</p> <p>Coretan kod di bawah menunjukkan contoh untuk yang terakhir, ia mengehadkan mesej pengguna kepada 500 aksara. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Mesej (maksima 500 aksara):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

The panjang maksimum atribut tidak mengembalikan mesej ralat, tetapi penyemak imbas semata-mata tidak membenarkan pengguna menaip lebih daripada nombor aksara yang ditentukan. Itulah sebabnya ia sangat penting memaklumkan pengguna tentang kekangan tersebut, jika tidak, mereka tidak akan faham mengapa mereka tidak boleh meneruskan dengan menaip.

 
 * Kata laluan Awak: