Beranda » Desain web » Intro Into HTML5 Constraint Validation

    Intro Into HTML5 Constraint Validation

    Situs web dan aplikasi interaktif tidak dapat dibayangkan tanpa formulir yang memungkinkan kami untuk melakukannya terhubung dengan pengguna kami, dan untuk dapatkan data kita perlu untuk mengamankan kelancaran transaksi dengan mereka. Kami memang butuh input pengguna yang valid, namun kita perlu mendapatkannya dengan cara itu tidak membuat frustrasi pengguna kami terlalu banyak.

    Meskipun kami dapat meningkatkan kegunaan formulir kami dengan pola desain UX yang dipilih dengan cerdas, HTML5 juga memiliki mekanisme asli untuk validasi kendala yang memungkinkan kami untuk tangkap kesalahan input tepat di front-end.

    Dalam posting ini, kita akan fokus validasi kendala yang disediakan browser, dan melihat bagaimana pengembang frontend bisa mengamankan input pengguna yang valid menggunakan HTML5.

    Mengapa Kami Membutuhkan Validasi Input Front-End

    Validasi input memiliki dua tujuan utama. Konten yang kami dapatkan harus:

    1. Berguna

    Kita butuh data yang dapat digunakan yang dapat kami kerjakan. Kita perlu membuat orang masuk data realistis dalam format yang tepat. Misalnya, tidak ada orang yang hidup hari ini yang lahir 200 tahun yang lalu. Mendapatkan data seperti ini mungkin tampak lucu pada awalnya, tetapi dalam jangka panjang itu menyebalkan, dan mengisi basis data kami dengan data yang tidak berguna.

    2. Aman

    Ketika mengacu pada keamanan, ini berarti kita perlu mencegah injeksi konten berbahaya - baik disengaja atau tidak sengaja.

    Kegunaan (mendapatkan data yang masuk akal) dapat dicapai hanya di sisi klien, tim backend tidak bisa membantu terlalu banyak dengan ini. Untuk mendapatkan keamanan, pengembang depan dan belakang harus bekerja bersama.

    Jika pengembang frontend benar memvalidasi input di sisi klien, tim backend harus berurusan dengan jauh lebih sedikit kerentanan. Peretasan (sebuah situs) sering kali mengharuskan mengirimkan data tambahan, atau data dalam format yang salah. Pengembang dapat memerangi lubang keamanan seperti ini, berhasil bertarung dari front-end.

    Misalnya, panduan keamanan PHP ini merekomendasikan untuk memeriksa semua yang kami bisa di sisi klien. Mereka menekankan pentingnya validasi input frontend dengan memberikan banyak contoh, seperti:

    "Validasi input berfungsi paling baik dengan nilai yang sangat terbatas, mis. Ketika sesuatu harus berupa integer, atau string alfanumerik, atau URL HTTP."

    Dalam validasi input frontend, tugas kita adalah memaksakan kendala yang masuk akal pada input pengguna. Fitur validasi kendala HTML5 memberi kami sarana untuk melakukannya.

    HTML5 Batasan Validasi

    Sebelum HTML5, pengembang frontend terbatas pada memvalidasi input pengguna dengan JavaScript, yang merupakan proses yang membosankan dan rentan kesalahan. Untuk meningkatkan validasi formulir sisi klien, HTML5 telah memperkenalkan a validasi kendala algoritma yang berjalan di browser modern, dan memeriksa validitas input yang dikirimkan.

    Untuk melakukan evaluasi, algoritma menggunakan atribut yang berhubungan dengan validasi elemen input, seperti ,

    Itu panjang maksimal atribut tidak mengembalikan pesan kesalahan, tetapi browser tidak membiarkan pengguna mengetik lebih dari jumlah karakter yang ditentukan. Itu sebabnya sangat penting untuk beri tahu pengguna tentang batasannya, jika tidak mereka tidak akan mengerti mengapa mereka tidak bisa melanjutkan pengetikan.

    4. pola untuk validasi Regex

    Itu pola atribut memungkinkan kita untuk gunakan Ekspresi Reguler dalam proses validasi input kami. Ekspresi reguler adalah a set karakter yang ditentukan sebelumnya yang membentuk pola tertentu. Kita bisa menggunakannya untuk mencari string yang mengikuti pola, atau untuk menegakkan format tertentu yang ditentukan oleh pola.

    Dengan pola atribut yang dapat kita lakukan yang terakhir - membatasi pengguna untuk mengirimkan input mereka dalam format itu cocok dengan ekspresi reguler yang diberikan.

    Itu pola atribut memiliki banyak kasus penggunaan, tetapi ini bisa sangat berguna saat kita menginginkannya memvalidasi bidang kata sandi.

    Contoh di bawah ini mengharuskan pengguna untuk memasukkan kata sandi yang panjangnya minimal 8 karakter, dan mengandung setidaknya satu huruf dan satu angka (sumber dari regex yang saya gunakan).

     

    Beberapa hal lagi

    Pada artikel ini, kami telah melihat cara memanfaatkan validasi formulir yang disediakan browser disediakan oleh algoritma validasi kendala asli HTML5. Untuk membuat skrip validasi khusus kami, kami perlu menggunakan Constraint Validation API yang bisa menjadi langkah selanjutnya dalam menyempurnakan keterampilan validasi form.

    Formulir HTML5 dapat diakses oleh teknologi bantu, jadi kami tidak harus menggunakan wajib aria Atribut ARIA untuk menandai bidang input yang diperlukan untuk pembaca layar. Namun tetap bermanfaat untuk menambahkan dukungan aksesibilitas untuk browser lama. Itu juga mungkin menyisih dari validasi kendala dengan menambahkan tidak valid atribut boolean ke

    elemen.