Melaksanakan corak HTML `untuk pengesahan input

Atribut corak adalah atribut yang digunakan untuk pengesahan input dalam HTML5. Ia menerima ungkapan biasa untuk menentukan peraturan format input. Sebagai contoh, corak = "[a-za-z] {3}" dikehendaki memasukkan tiga huruf; Apabila menulis, anda harus mengelakkan menambah ^ dan $, gunakan peraturan ringkas dan perhatikan kepekaan kes; Kegunaan biasa termasuk sekatan format seperti nombor telefon bimbit, alamat e -mel, kata laluan, dan lain -lain; Atribut tajuk yang sepadan boleh meningkatkan pengalaman pengguna, tetapi anda perlu memberi perhatian kepada batasannya, seperti tidak menyokong logik kompleks, sintaks biasa yang terhad, dan ketidakupayaan untuk kesilapan maklum balas dalam masa nyata, dan lain -lain, yang sesuai untuk keperluan pengesahan asas.

Pengesahan bentuk adalah keperluan umum dalam pembangunan web, dan HTML menyediakan harta yang mudah tetapi berkesan: pattern yang dapat menyelesaikan pengesahan input asas tanpa menulis garis JavaScript. Atribut ini sesuai untuk elemen <input> , dan sangat sesuai untuk mengendalikan sekatan format teks, seperti nombor telefon, peraturan kata laluan, kod pos, dll.

Apakah atribut pattern ?

pattern adalah atribut yang digunakan dalam HTML5 untuk pengesahan input. Ia menerima ungkapan biasa (regex) dan penyemak imbas secara automatik akan memeriksa sama ada input pengguna sepadan dengan corak. Jika ia tidak memenuhi, borang itu tidak akan dikemukakan dan pengguna akan diminta untuk mengubahnya.

Contohnya:

 <input type = "text" corak = "[a-za-z] {3}" title = "Sila masukkan tiga huruf Inggeris">

Contoh di atas memerlukan pengguna untuk memasukkan tiga huruf (kedua -dua kes atas dan bawah), jika tidak, pengesahan tidak mungkin.

Harus diingat bahawa pattern hanya mencetuskan pengesahan apabila borang diserahkan, dan tidak akan menghalang pengguna memasuki aksara haram, tetapi hanya akan menghalang penyerahan data yang salah.

Bagaimana cara menulis ungkapan pattern yang sah?

pattern menulis sebenarnya menulis ungkapan biasa, tetapi terdapat beberapa butiran kecil untuk memberi perhatian kepada:

• Jangan tambah ^ dan $ : walaupun dalam kebanyakan persekitaran biasa, kami digunakan untuk menambah simbol permulaan dan akhir untuk memastikan bahawa keseluruhan rentetan sepadan, dalam pattern HTML, ia memerlukan keseluruhan input tepat sepadan dengan biasa secara lalai.
• Gunakan peraturan ringkas dan jelas : Sebagai contoh, jika anda ingin mengehadkan nombor telefon bimbit kepada 11 digit, anda boleh menulisnya sebagai pattern="\d{11}" .
• Beri perhatian kepada kepekaan kes : Jika kes tidak sensitif kes, anda boleh menggunakan [a-zA-Z] atau tambah bendera i secara tetap (tetapi HTML tidak menyokong bendera i , jadi anda hanya boleh menulis semua kes secara manual).

Beberapa contoh penggunaan biasa:

• Alamat e-mel (versi mudah): pattern="[a-zA-Z0-9._% -] @[a-zA-Z0-9.-] \.[az]{2,}$"
• Kata laluan (sekurang-kurangnya 8 digit, mengandungi huruf dan nombor): pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}"
• Kod pos (nombor 6 digit Cina): pattern="\d{6}"

Gunakan Tajuk title untuk meningkatkan pengalaman pengguna

Apabila input pengguna tidak mematuhi peraturan pattern , penyemak imbas biasanya akan muncul kotak pendek pendek. Untuk menjadikan pengguna lebih jelas tentang apa yang salah, disarankan untuk menggunakan atribut title untuk menerangkan format yang betul:

 <input type = "text" corak = "\ d {6}" title = "Sila masukkan kod zip dengan 6 digit">

Dengan cara ini, pengguna dapat melihat maklumat segera apabila mereka melayang atau memasukkan ralat, mengelakkan meneka.

Walau bagaimanapun, cara pelayar yang berbeza memaparkan petunjuk mungkin sedikit berbeza, jadi anda tidak boleh bergantung sepenuhnya pada title untuk menyampaikan maklumat utama. Adalah lebih baik untuk menggabungkan arahan pada halaman.

Langkah berjaga -jaga dan batasan

Walaupun pattern mudah, ia juga mempunyai beberapa batasan:

• Penghakiman logik kompleks tidak disokong, seperti "salah satu daripada dua bidang mesti diisi"
• Sintaks biasa mempunyai batasan, seperti tidak menyokong lookaheads atau bendera (seperti /i )
• Sokongan penyemak imbas mudah alih adalah baik, tetapi masih perlu diuji
• Tiada kesilapan maklum balas masa nyata, pengesahan hanya dicetuskan semasa mengemukakan

Jika anda memerlukan logik pengesahan yang lebih kompleks, anda masih perlu menggunakan JavaScript untuk melaksanakannya.

Secara umum, atribut pattern HTML adalah alat yang ringan dan praktikal yang sesuai untuk kawalan format input asas. Selagi anda merancang ekspresi biasa yang munasabah dan memadankannya dengan maklumat yang jelas, anda dapat meningkatkan pengalaman bentuk dengan berkesan.

Atas ialah kandungan terperinci Melaksanakan corak HTML `untuk pengesahan input. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!