Menggunakan API Kekangan HTML5 untuk Pengesahan Borang

3

Takeaways Key

• API Kekangan HTML5 memudahkan pengesahan bentuk dengan membenarkan pemaju untuk mengelakkan menggunakan JavaScript untuk pengesahan asas, dengan itu menjadikan proses lebih banyak pengguna dan pemaju-mesra.
Pengesahan asas boleh dicapai dengan menggunakan nilai yang sesuai untuk atribut jenis elemen input, seperti "e -mel" atau "URL". Atribut pengesahan tambahan seperti corak, diperlukan, maxlength, min, dan max boleh digunakan untuk melaksanakan kekangan asas.
Untuk logik pengesahan kompleks, API Kekangan HTML5 boleh digunakan untuk melakukan pengesahan klien dan memaparkan mesej ralat. API termasuk kaedah setCustomValidity () yang boleh digunakan untuk menandakan medan sebagai sah atau tidak sah dan memaparkan mesej ralat tersuai.
Mengesahkan borang web sentiasa menjadi tugas yang menyakitkan bagi banyak pemaju. Melaksanakan pengesahan sampingan pelanggan dalam cara pengguna dan juga cara yang mesra pemaju adalah sangat sukar. Selain itu, pengguna memberitahu pengguna tentang ralat pengesahan dengan cara yang menyenangkan adalah tugas yang membosankan. API Pengesahan Kekangan HTML5 membantu pemaju mengelakkan penggunaan JavaScript untuk pengesahan mudah. Untuk logik pengesahan yang kompleks, API boleh digunakan untuk melakukan pengesahan sampingan pelanggan dan memaparkan mesej ralat dengan mudah. Dalam tutorial ini saya akan memberi anda gambaran keseluruhan mengenai API Pengesahan Kekangan HTML5 dan bincangkan cara menggunakannya dalam projek anda untuk membuat borang web yang lebih baik. Sebelum pergi lagi, lihat carta keserasian ini untuk memastikan ciri -ciri yang disokong oleh penyemak imbas anda. Hanya ambil perhatian bahawa, walaupun API Pengesahan Kekangan HTML5 menawarkan cara terbaik untuk mengesahkan medan borang, pengesahan sampingan pelayan mesti selalu dilakukan.

Pengesahan Kekangan Asas

Pengesahan asas boleh dilakukan dengan memilih nilai yang paling sesuai untuk atribut jenis elemen input. Sebagai contoh, anda boleh mengesahkan e -mel dengan menulis HTML berikut:

Anda boleh mengesahkan URL dengan menulis markup berikut:

<span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

Dengan menggunakan e -mel atau URL sebagai nilai untuk jenisnya Atribut, kekangan ditambah secara automatik dan medan disahkan secara automatik apabila borang dikemukakan. Penyemak imbas juga memaparkan mesej ralat dengan cara yang sangat mesra pengguna jika sebarang kesilapan pengesahan berlaku. Terdapat juga beberapa atribut berdasarkan pengesahan yang boleh anda gunakan dalam bentuk anda. Berikut adalah beberapa atribut yang boleh digunakan untuk melaksanakan kekangan asas:

<span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

Corak: Atribut corak digunakan untuk menentukan ungkapan biasa dan nilai medan mesti sepadan dengan corak ini. Atribut ini boleh digunakan dengan jenis input seperti teks, kata laluan, e -mel, URL, tel dan carian. Sebagai contoh, coretan HTML berikut menggunakan atribut corak untuk medan input.
1. Apabila borang dikemukakan, pengesahan dilakukan pada medan input. Akibatnya, nilai seperti ABCD tidak akan lulus pengesahan, dalam kes ini.

   <span><span><span><input> type<span>=”text”</span> pattern<span>=”[1-4]{5}”</span> /></span></span></span>

2. Diperlukan: Atribut yang diperlukan menunjukkan bahawa nilai mesti ditentukan untuk elemen input.

   <span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

   Coretan di atas menggunakan atribut yang diperlukan. Jika anda meninggalkan medan kosong dan cuba menyerahkan borang, ralat pengesahan akan berlaku.
3. MaxLength: Ini adalah nilai integer yang menentukan bilangan maksimum aksara yang dibenarkan untuk medan input tertentu.

   <span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

   Coretan di atas menambah had atas ke medan input. Nilai yang dimasukkan dalam elemen input ini mestilah kurang daripada 20 aksara.
4. Min & Max: Seperti yang dicadangkan oleh nama -nama, atribut Min dan Max menentukan had bawah dan atas masing -masing untuk elemen input.

Mengendalikan kekangan kompleks

Logik pengesahan kompleks boleh dikendalikan dengan mudah menggunakan API Kekangan HTML5. Sebagai contoh, anda boleh mempunyai medan kata laluan dan medan kata laluan mengesahkan. Anda perlu memastikan bahawa nilai -nilai dalam kedua -dua medan adalah sama pada masa penyerahan. Jika tidak, mesej ralat hendaklah dipaparkan kepada pengguna. Ini sebenarnya boleh dilakukan dengan mudah dengan API Kekangan HTML5. Pertama, kita perlu melampirkan pendengar onchange ke medan kata laluan. Coretan berikut menunjukkan borang HTML.

<span><span><span><input> type<span>=”email”</span> /></span>		//The field value must be an email</span></span>

Memandangkan tidak akan ada acara penyerahan sehingga semua bidang telah disahkan sepenuhnya, tidak ada cara untuk mengetahui apabila borang itu diserahkan. Itulah sebabnya kami berminat dalam acara perubahan. Setiap kali acara perubahan dipecat, kita perlu menyemak sama ada kedua -dua kata laluan sepadan. Jika ya, kami memanggil setCustomValidity () pada elemen input (medan kata laluan dalam kes ini) dengan rentetan kosong sebagai hujah. Ini bermakna medan kata laluan ditandakan sebagai sah dan oleh itu apabila borang dikemukakan tidak akan ada ralat pengesahan. Sebaliknya, jika kita mengesan bahawa kata laluan tidak sepadan dengan perubahan Acara yang kami panggil setCustomValidity () dengan mesej ralat sebagai hujah. Ini bermakna medan kata laluan akan ditandakan sebagai tidak sah dan mesej ralat akan ditunjukkan apabila pengguna mengemukakan borang tersebut. JavaScript berikut melaksanakan logik ini:

<span><span><span><input> type<span>=”URL”</span> /></span>			// The field value must be a URL</span></span>

Bahagian terbaik tentang menggunakan pendekatan di atas adalah bahawa anda tidak perlu bimbang tentang cara membentangkan mesej ralat kepada pengguna. Anda hanya perlu memanggil kaedah mudah - setCustomValidity () - dengan argumen yang sesuai dan mesej ralat akan dipaparkan dengan sewajarnya.

Kesimpulan

Anda boleh melaksanakan banyak kekangan yang mudah untuk menggunakan API Pengesahan Kekangan HTML5. API menawarkan satu set alat yang besar untuk menyesuaikan proses pengesahan. Kami baru sahaja membincangkan sebahagian daripada API. Untuk mengetahui tentang konsep yang lebih maju seperti cangkuk CSS, keadaan kesahihan periksa tutorial ini di Mozilla.

Soalan Lazim mengenai API Kekangan HTML5 untuk Pengesahan Borang

Apakah API Kekangan HTML5 dan mengapa penting untuk pengesahan bentuk? Adalah penting untuk pengesahan borang kerana ia menyediakan cara yang standard untuk memastikan input pengguna memenuhi kriteria tertentu sebelum diserahkan. Ini dapat membantu mencegah kesilapan dan meningkatkan pengalaman pengguna dengan memberikan maklum balas segera mengenai kesahihan input mereka.

Bagaimanakah API kekangan berbeza daripada kaedah pengesahan JavaScript tradisional? Ini boleh memakan masa dan rawan kesilapan. Sebaliknya, API kekangan menyediakan satu set kaedah dan sifat standard yang boleh digunakan untuk mengesahkan medan bentuk. Ini boleh menjadikan kod anda lebih cekap dan lebih mudah untuk dikekalkan. termasuk medan teks, kotak semak, butang radio, dan pilih menu. Walau bagaimanapun, ia mungkin tidak berfungsi dengan beberapa jenis medan borang atau medan tersuai yang dibuat menggunakan perpustakaan pihak ketiga. Menyediakan kaedah setvaliditi yang membolehkan anda menetapkan mesej ralat tersuai. Anda boleh menggunakan kaedah ini bersempena dengan harta PengesahanMessage untuk memaparkan mesej ralat tersuai apabila medan borang gagal pengesahan. API Kekangan adalah teknologi sisi pelanggan, yang bermaksud ia berjalan dalam penyemak imbas pengguna. Walau bagaimanapun, anda boleh menggunakannya bersempena dengan kaedah pengesahan sisi pelayan untuk menyediakan penyelesaian pengesahan yang lebih mantap. Adalah penting untuk sentiasa mengesahkan input pengguna di sisi pelayan, kerana pengesahan sisi klien dapat dilangkau oleh pengguna yang berniat jahat. 🎜> API Kekangan menyediakan kaedah Checkvalidity yang boleh digunakan untuk mengesahkan semua bidang dalam bentuk sekaligus. Kaedah ini mengembalikan nilai boolean yang menunjukkan sama ada semua medan dalam bentuk itu sah. untuk bekerja dengan elemen bentuk HTML5. Ia menyediakan satu set kaedah dan sifat yang boleh digunakan untuk mengesahkan unsur-unsur ini dan memastikan bahawa input pengguna memenuhi kriteria tertentu. 🎜> API Kekangan boleh digunakan bersempena dengan pendengar acara JavaScript untuk mengesahkan bidang bentuk dalam masa nyata. Sebagai contoh, anda boleh menggunakan acara input untuk mengesahkan medan setiap kali pengguna menaip ke dalamnya. Ciri HTML5, jadi ia mungkin tidak disokong dalam pelayar yang lebih tua. Walau bagaimanapun, anda boleh menggunakan pengesanan ciri untuk memeriksa sama ada API kekangan tersedia dan menyediakan kaedah pengesahan sandaran jika tidak.

Bagaimana saya boleh menggunakan API Kekangan untuk mengesahkan borang dalam konteks mudah alih? Walau bagaimanapun, anda mungkin perlu menyesuaikan peraturan pengesahan anda untuk mengambil kira kaedah input yang berbeza dan saiz skrin peranti mudah alih.

Atas ialah kandungan terperinci Menggunakan API Kekangan HTML5 untuk Pengesahan Borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!