Panduan Lengkap untuk Borang HTML dan Pengesahan Kekangan

Dalam artikel ini, kita melihat bidang borang HTML dan pilihan pengesahan yang ditawarkan oleh HTML5. Kami juga akan melihat bagaimana ini dapat dipertingkatkan melalui penggunaan CSS dan JavaScript.

Takeaways Key

HTML5 meningkatkan pengesahan bentuk dengan memperkenalkan jenis input dan atribut baru yang mengautomasikan banyak proses pengesahan, mengurangkan keperluan untuk JavaScript yang luas.
Pengesahan kekangan dalam HTML5 membolehkan penyemak imbas untuk memeriksa input pengguna secara automatik terhadap peraturan yang ditentukan sebelum penyerahan borang, meningkatkan pengalaman pengguna dan integriti data.
Pengesahan sisi klien, sementara membantu untuk menangkap kesilapan biasa, mesti ditambah dengan pengesahan sisi pelayan untuk memastikan keselamatan data dan integriti.
input JavaScript tersuai harus dielakkan apabila mungkin, kerana mereka merumitkan kebolehcapaian dan mungkin bertentangan dengan fungsi penyemak imbas asli.
CSS boleh digunakan untuk medan input gaya berdasarkan keadaan pengesahan mereka, dengan kelas pseudo seperti: sah dan: tidak sah, yang membolehkan maklum balas dinamik pada input pengguna.
API Pengesahan Kekangan dalam HTML5 membolehkan senario pengesahan tersuai yang HTML sahaja tidak dapat mengendalikan, seperti membandingkan dua bidang atau cek asynchronous, meningkatkan fungsi bentuk dan interaksi pengguna.
apakah pengesahan kekangan?

Setiap bidang bentuk mempunyai tujuan. Dan tujuan ini sering ditadbir oleh contraints - atau peraturan yang mengawal apa yang sepatutnya dan tidak boleh dimasukkan ke dalam setiap bidang bentuk. Sebagai contoh, medan e -mel akan memerlukan alamat e -mel yang sah; Medan kata laluan mungkin memerlukan jenis aksara tertentu dan mempunyai bilangan minimum aksara yang diperlukan; dan medan teks mungkin mempunyai had pada berapa banyak aksara yang dapat dimasukkan.

Pelayar moden mempunyai keupayaan untuk memeriksa bahawa kekangan ini diperhatikan oleh pengguna, dan boleh memberi amaran kepada mereka apabila peraturan tersebut telah dilanggar. Ini dikenali sebagai pengesahan contstraint.

Pengesahan sisi pelayan klien

Majoriti kod JavaScript yang ditulis pada tahun-tahun awal bahasa yang dikendalikan pengesahan borang klien. Malah pada hari ini, pemaju menghabiskan masa penulisan masa yang signifikan untuk memeriksa nilai medan.

Adakah ini masih diperlukan dalam pelayar moden? Mungkin tidak

. Dalam kebanyakan kes, ia benar -benar bergantung pada apa yang anda cuba lakukan. Tetapi pertama, inilah mesej amaran besar:

Pengesahan sisi klien adalah nicety yang boleh menghalang kesilapan masuk data yang biasa sebelum aplikasi membuang masa dan jalur lebar menghantar data ke pelayan. Ia bukan pengganti pengesahan sisi pelayan!

Sentiasa membersihkan pelayan data. Tidak setiap permintaan akan datang dari penyemak imbas. Walaupun ia berlaku, tidak ada jaminan penyemak imbas mengesahkan data. Sesiapa yang tahu bagaimana membuka alat pemaju penyemak imbas juga boleh memintas HTML dan JavaScript anda yang dibuat dengan penuh kasih sayang.

medan input HTML5

HTML menawarkan:

• untuk kotak teks multiline
• Untuk senarai drop-down pilihan
• untuk ... butang

tetapi anda akan menggunakan paling kerap:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Atribut Jenis menetapkan jenis kawalan, dan terdapat pilihan pilihan yang besar:

taip Keterangan butang butang tanpa tingkah laku lalai kotak semak kotak cek/tanda warna Pemetik warna tarikh Pemetik tarikh untuk tahun, bulan, dan hari DateTime-Local Pemetik Tarikh dan Masa e -mel medan entri e -mel fail pemetik fail Tersembunyi medan tersembunyi imej butang yang memaparkan imej yang ditakrifkan oleh atribut SRC bulan Pemetik sebulan dan tahun nombor bidang kemasukan nombor kata laluan medan entri kata laluan dengan teks yang dikaburkan radio butang radio julat kawalan slider Tetapkan semula butang yang menetapkan semula semua input bentuk ke nilai lalai mereka (tetapi elakkan menggunakan ini, kerana jarang berguna) cari medan entri carian hantar butang penyerahan borang Tel medan entri nombor telefon teks medan entri teks masa pemetik masa tanpa zon waktu url Bidang Kemasukan URL minggu Pemungut Nombor dan Tahun Minggu

Penyemak imbas jatuh ke teks jika anda meninggalkan atribut jenis atau ia tidak menyokong pilihan. Pelayar moden mempunyai sokongan yang baik untuk semua jenis, tetapi pelayar lama masih akan menunjukkan medan entri teks.

atribut lain berguna termasuk:

atribut Keterangan menerima Jenis muat naik fail alt Teks alternatif untuk jenis gambar Autocomplete Petunjuk untuk Penyempurnaan Auto Lapangan Autofocus medan fokus pada beban halaman menangkap Kaedah Input Menangkap Media diperiksa kotak semak/radio diperiksa kurang upaya Lumpuhkan kawalan (ia tidak akan disahkan atau mempunyai nilainya yang dikemukakan) bentuk Bersekutu dengan borang menggunakan ID ini formAction URL untuk diserahkan pada butang hantar dan gambar InputMode Petunjuk Jenis Data senarai Id pilihan autocomplete maks nilai maksimum maxlength Panjang rentetan maksimum min nilai minimum minlength Panjang rentetan minimum nama Nama kawalan, seperti yang dikemukakan ke pelayan corak corak ekspresi biasa, seperti [a-z] untuk satu atau lebih huruf besar pemegang tempat teks pemegang tempat apabila nilai medan kosong dibaca Bidang ini tidak dapat diedit, tetapi masih akan disahkan dan diserahkan diperlukan Bidang diperlukan saiz saiz kawalan (sering ditindih dalam CSS) ejaan Tetapkan pemeriksaan ejaan yang benar atau palsu SRC URL imej langkah nilai tambahan dalam bilangan dan julat Jenis Jenis medan (lihat di atas) nilai nilai awal

medan output html

serta jenis input, HTML5 menyediakan output baca sahaja:

• output: Hasil teks pengiraan atau tindakan pengguna
• Kemajuan: Bar Kemajuan dengan Nilai dan Atribut Max
• Meter: Skala yang boleh berubah antara hijau, ambar, dan merah bergantung kepada nilai yang ditetapkan untuk nilai, min, max, rendah, tinggi, dan optimum.

Label input

medan harus mempunyai yang berkaitan, yang boleh dibungkus di sekitar elemen:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

atau pautan ID medan ke label menggunakan atribut:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Label adalah penting untuk aksesibiliti. Anda mungkin menghadapi borang yang menggunakan tempat letak untuk menjimatkan ruang skrin:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Teks tempat letak hilang apabila pengguna menaip sesuatu - walaupun satu ruang. Lebih baik menunjukkan label daripada memaksa pengguna ingat apa yang dikehendaki medan!

tingkah laku input

Jenis medan dan atribut kekangan mengubah tingkah laku input penyemak imbas. Sebagai contoh, input nombor menunjukkan papan kekunci angka pada peranti mudah alih. Medan ini mungkin menunjukkan pemutar dan papan kekunci Kursor ke atas/keyboard akan kenaikan dan nilai penurunan.

Kebanyakan jenis bidang adalah jelas, tetapi terdapat pengecualian. Sebagai contoh, kad kredit adalah angka, tetapi pemutar kenaikan/penurunan tidak berguna dan terlalu mudah untuk ditekan ke atas atau ke bawah apabila memasuki nombor 16 digit. Lebih baik menggunakan jenis teks standard, tetapi tetapkan atribut InputMode kepada angka, yang menunjukkan papan kekunci yang sesuai. Menetapkan AutoComplete = "CC-Number" juga mencadangkan mana-mana nombor kad yang telah dikonfigurasi atau sebelum ini.

menggunakan jenis medan yang betul dan Autocorrect menawarkan faedah yang sukar dicapai dalam JavaScript. Sebagai contoh, sesetengah pelayar mudah alih boleh:

• Import butiran kad kredit dengan mengimbas kad menggunakan kamera
• mengimport kod satu kali yang dihantar oleh SMS

Pengesahan Automatik

Penyemak imbas memastikan nilai input mematuhi kekangan yang ditakrifkan oleh jenis, min, max, langkah, minlength, maxlength, corak, dan atribut yang diperlukan. Contohnya:

cuba menyerahkan nilai kosong menghalang penyerahan borang dan menunjukkan mesej berikut dalam Chrome:

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Spinners tidak akan membenarkan nilai di luar julat 1 hingga 100. Mesej pengesahan yang sama muncul jika anda menaip rentetan yang bukan nombor. semua tanpa satu baris javascript.

anda boleh menghentikan pengesahan penyemak imbas dengan:

Menambah atribut novalidate ke elemen

Menambah atribut formnovalidate ke butang penyerahan atau imej
• Membuat input JavaScript tersuai

Jika anda menulis komponen entri tarikh berasaskan JavaScript baru, sila berhenti dan melangkah dari papan kekunci anda!

Menulis kawalan input tersuai adalah sukar. Anda perlu mempertimbangkan tetikus, papan kekunci, sentuhan, ucapan, kebolehcapaian, dimensi skrin, dan apa yang berlaku apabila JavaScript gagal. Anda juga mencipta pengalaman pengguna yang berbeza. Mungkin kawalan anda lebih tinggi daripada pemetik tarikh standard di desktop, iOS, dan Android, tetapi UI yang tidak dikenali akan mengelirukan beberapa pengguna.

Terdapat tiga sebab utama pemaju memilih untuk membuat input berasaskan JavaScript.

1. Kawalan standard sukar untuk gaya

Styling CSS adalah terhad dan sering memerlukan hacks, seperti overlaying input dengan labelnya :: sebelum dan :: selepas unsur-unsur pseudo. Keadaan ini bertambah baik, tetapi mempersoalkan apa -apa reka bentuk yang mengutamakan bentuk ke atas fungsi.

2. Jenis moden tidak disokong dalam pelayar lama

Pada dasarnya, anda pengekodan untuk Internet Explorer. Pengguna IE tidak akan mendapat pemetik tarikh tetapi masih boleh memasukkan tarikh dalam format YYYY-MM-DD. Jika pelanggan anda menegaskan, maka muatkan polyfill dalam IE sahaja. Tidak perlu membebankan pelayar moden.

3. Anda memerlukan jenis input baru yang tidak pernah dilaksanakan sebelum

situasi ini jarang berlaku, tetapi selalu bermula dengan medan HTML5 yang sesuai. Mereka cepat, dan mereka bekerja walaupun sebelum skrip telah dimuatkan. Anda secara progresif boleh meningkatkan bidang yang diperlukan. Sebagai contoh, percikan JavaScript dapat memastikan tarikh akhir acara kalendar berlaku selepas tarikh permulaan.

Secara ringkas: Elakkan semula mencipta kawalan HTML!

Styling Pengesahan CSS

anda boleh memohon kelas pseudo berikut untuk memasukkan medan untuk menggayakannya mengikut keadaan semasa:

pemilih Keterangan : Fokus bidang dengan fokus : fokus-fokus Unsur mengandungi medan dengan fokus (ya, itu pemilih induk!) : fokus-kelihatan Unsur mempunyai tumpuan kerana navigasi papan kekunci, jadi cincin fokus atau gaya yang lebih jelas diperlukan : diperlukan medan dengan atribut yang diperlukan : Pilihan medan tanpa atribut yang diperlukan : sah bidang yang telah meluluskan pengesahan : tidak sah bidang yang belum lulus pengesahan : Pengguna-sah bidang yang telah lulus pengesahan setelah pengguna berinteraksi dengannya (Firefox sahaja) : Pengguna-Invalid Bidang yang belum lulus pengesahan setelah pengguna berinteraksi dengannya (Firefox sahaja) : in-range Nilainya berada dalam julat pada nombor atau input julat : Out-of-range Nilai tidak dapat dipisahkan pada input nombor atau julat : dilumpuhkan medan dengan atribut kurang upaya : didayakan medan tanpa atribut kurang upaya : baca sahaja bidang dengan atribut baca sahaja : baca-menulis: bidang tanpa atribut baca sahaja : diperiksa kotak semak atau butang radio yang diperiksa : tidak pasti kotak semak atau keadaan radio yang tidak pasti, seperti ketika semua butang radio tidak dicentang : lalai butang hantar lalai atau gambar

anda boleh gaya teks pemegang letak input dengan :: Pseudo-Element Placeholder:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

pemilih di atas mempunyai kekhususan yang sama, jadi pesanan boleh menjadi penting. Pertimbangkan contoh ini:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Input tidak sah mempunyai teks merah, tetapi ia hanya digunakan untuk input dengan atribut kurang upaya - jadi semua input yang diaktifkan adalah hitam.

Penyemak imbas menggunakan gaya pengesahan pada beban halaman. Sebagai contoh, dalam kod berikut setiap medan tidak sah diberikan sempadan merah:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Pengguna dihadapkan dengan set kotak merah yang menakutkan sebelum mereka berinteraksi dengan borang tersebut. Menunjukkan kesilapan pengesahan selepas penyerahan pertama atau sebagai nilai diubah akan menawarkan pengalaman yang lebih baik. Di sinilah langkah JavaScript ...

javascript dan api pengesahan kekangan

API Pengesahan Kekangan menyediakan pilihan penyesuaian borang yang dapat meningkatkan pemeriksaan medan HTML standard. Anda boleh:

• Hentikan pengesahan sehingga pengguna berinteraksi dengan medan atau menyerahkan borang
• tunjukkan mesej ralat dengan gaya tersuai
• Menyediakan pengesahan tersuai yang mustahil di HTML sahaja. Ini sering diperlukan apabila anda perlu membandingkan dua input - seperti ketika anda memasukkan alamat e -mel atau nombor telefon, periksa medan kata laluan "baru" dan "mengesahkan" mempunyai nilai yang sama, atau pastikan satu tarikh datang selepas yang lain.

Pengesahan borang

Sebelum menggunakan API, kod anda harus melumpuhkan mesej pengesahan dan ralat lalai dengan menetapkan harta novalidate borang untuk benar (sama seperti menambah atribut novalidate):

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

anda kemudian boleh menambah pengendali acara - seperti ketika borang mengemukakan:

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Pengendali boleh menyemak keseluruhan borang adalah sah menggunakan kaedah CheckValidity () atau ReportValidity (), yang kembali benar apabila semua input borang sah. (Perbezaannya ialah pemeriksaan CheckValidity () sama ada sebarang input tertakluk kepada pengesahan kekangan.)

Dokumen Mozilla Jelaskan:

Acara tidak sah juga dicetuskan pada setiap bidang yang tidak sah. Ini tidak gelembung: Pengendali mesti ditambah kepada setiap kawalan yang menggunakannya.

<span>/* blue placeholder on email fields */
</span><span>input<span><span>[type="email"]</span>::placeholder</span> {
</span>  <span>color: blue;
</span><span>}
</span>

Borang yang sah kini boleh menanggung cek pengesahan selanjutnya. Begitu juga, bentuk yang tidak sah boleh mempunyai bidang yang tidak sah yang diserlahkan.

Pengesahan medan

bidang individu mempunyai sifat pengesahan kekangan berikut:

• Willvalidate: Mengembalikan benar jika elemen itu adalah calon untuk pengesahan kekangan.

• PengesahanMessage: Mesej pengesahan. Ini akan menjadi rentetan kosong jika medan itu sah.

• Valitity: Objek ValidityState. Ini mempunyai harta yang sah yang ditetapkan benar apabila medan itu sah. Jika ia palsu, satu atau lebih sifat berikut akan benar:

  ValidityState Keterangan .badinput Penyemak imbas tidak dapat memahami input .CustomError Mesej kesahihan tersuai telah ditetapkan .patternmismatch Nilai tidak sepadan dengan atribut corak yang ditentukan .rangeOverflow nilainya lebih besar daripada atribut maksimum .rangeunderflow nilainya kurang daripada atribut min .Stepmismatch Nilai tidak sesuai dengan peraturan atribut langkah .toolong Panjang rentetan lebih besar daripada atribut maxLength .tooshort Panjang rentetan kurang daripada atribut minlength .typemismatch Nilai bukan e -mel atau URL yang sah .valuemissing Nilai yang diperlukan adalah kosong

bidang individu mempunyai kaedah pengesahan kekangan berikut:

• setCustomValidity (mesej): Menetapkan mesej ralat untuk medan yang tidak sah. Rentetan kosong mesti diluluskan apabila medan itu sah atau medan akan kekal tidak sah selama -lamanya.
• CheckValidity (): pulangan benar apabila input sah. Harta valitity.valid melakukan perkara yang sama, tetapi checkvalidity () juga mencetuskan peristiwa yang tidak sah di lapangan yang boleh berguna.

fungsi pengendali () boleh melengkapkan melalui setiap bidang dan memohon kelas yang tidak sah ke elemen induknya di mana perlu:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Anggapkan HTML anda menentukan medan e -mel:

<span><span><span><label</span>></span>your name <span><span><input</span> type<span>="text"</span> name<span>="name"</span> /></span><span><span><label</span>></span>
</span>

Skrip menggunakan kelas yang tidak sah ke

apabila e -mel tidak ditentukan atau tidak sah. CSS boleh menunjukkan atau menyembunyikan mesej pengesahan apabila borang yang dikemukakan:

<span><span><span><label</span> for<span>="nameid"</span>></span>your name<span><span></label</span>></span>
</span><span><span><span><input</span> type<span>="text"</span> id<span>="nameid"</span> name<span>="name"</span> /></span>
</span>

Membuat Validator Borang Custom

Demonstrasi berikut menunjukkan borang hubungan contoh yang memerlukan nama pengguna dan sama ada alamat e -mel, nombor telefon, atau kedua -duanya:

Lihat pen Contoh API Pengesahan Kekangan oleh SitePoint (@SitePoint) pada codepen.

Ia dilaksanakan menggunakan kelas pengesahan bentuk generik bernama FormValidate. Elemen bentuk diluluskan apabila meneliti objek. Parameter kedua pilihan boleh ditetapkan:

• benar untuk mengesahkan setiap bidang kerana pengguna berinteraksi dengannya
• palsu (lalai) untuk mengesahkan semua bidang selepas penyerahan pertama (pengesahan peringkat lapangan berlaku selepas itu)

<span><span><span><input</span> type<span>="text"</span> name<span>="name"</span> value<span>=""</span> placeholder<span>="your name"</span> /></span>
</span>

Kaedah .addCustom (medan, func) mentakrifkan fungsi pengesahan tersuai. Kod berikut memastikan sama ada medan e -mel atau TEL adalah sah (tidak diperlukan atribut):

<span><span><span><input</span> type<span>="number"</span> min<span>="1"</span> max<span>="100"</span> required /></span>
</span>

Objek FormValidate memantau kedua -dua yang berikut:

• peristiwa focusout, yang kemudian periksa medan individu
• borang hantar acara, yang kemudian periksa setiap medan

kedua -duanya memanggil kaedah .validatefield (medan), yang memeriksa sama ada bidang meluluskan pengesahan kekangan standard. Apabila ia berlaku, sebarang fungsi pengesahan tersuai yang diberikan kepada bidang itu melaksanakannya. Semua mesti kembali benar untuk bidang itu sah.

Bidang tidak sah mempunyai kelas yang tidak sah yang digunakan untuk elemen induk medan, yang memaparkan mesej bantuan merah menggunakan CSS.

Akhirnya, objek memanggil fungsi hantar tersuai apabila borang keseluruhannya sah:

<span><span><span><input</span> type<span>="text"</span> name<span>="username"</span> /></span>
</span>

Sebagai alternatif, anda boleh menggunakan addEventListener standard untuk mengendalikan peristiwa hantar borang, kerana FormValidate menghalang pengendali selanjutnya berjalan apabila borang tidak sah.

Form Finesse

Borang

adalah asas bagi semua aplikasi web dan pemaju menghabiskan masa yang banyak memanipulasi input pengguna. Pengesahan kekangan disokong dengan baik: penyemak imbas boleh mengendalikan kebanyakan cek dan menunjukkan pilihan input yang sesuai.

Cadangan:

• Gunakan jenis input HTML standard jika mungkin. Tetapkan min, max, langkah, minlength, maxlength, corak, diperlukan, inputMode, dan atribut autokomplet yang sesuai.
• Jika perlu, gunakan sedikit JavaScript untuk membolehkan pengesahan dan mesej tersuai.
• Untuk bidang yang lebih kompleks, secara progresif meningkatkan input standard.

Akhirnya: Lupakan Internet Explorer!

Kecuali pelanggan anda kebanyakannya pengguna IE, tidak perlu melaksanakan fungsi pengesahan sandaran anda sendiri. Semua medan input HTML5 berfungsi dalam IE tetapi mungkin memerlukan lebih banyak usaha pengguna. (Sebagai contoh, IE tidak akan mengesan apabila anda memasukkan alamat e -mel yang tidak sah.) Anda masih perlu mengesahkan data pada pelayan, jadi pertimbangkan untuk menggunakannya sebagai asas pemeriksaan ralat IE.

Soalan Lazim (Soalan Lazim) mengenai Borang HTML dan Pengesahan Kekangan

Apakah kepentingan pengesahan bentuk HTML?

Pengesahan bentuk HTML adalah aspek penting dalam pembangunan web. Ia memastikan bahawa data yang dimasukkan oleh pengguna ke dalam bentuk memenuhi kriteria tertentu sebelum dihantar ke pelayan. Ini bukan sahaja mengekalkan integriti data tetapi juga meningkatkan pengalaman pengguna dengan memberikan maklum balas segera mengenai ketepatan data yang dimasukkan. Tanpa pengesahan bentuk, terdapat risiko menerima data yang salah, tidak lengkap, atau bahkan berniat jahat, yang boleh membawa kepada pelbagai isu termasuk rasuah data, pelanggaran keselamatan, dan kemalangan sistem.

Bagaimanakah HTML5 memperbaiki pengesahan bentuk?

HTML5 memperkenalkan beberapa elemen dan atribut bentuk baru yang menjadikan pengesahan bentuk lebih mudah dan lebih cekap. Sebagai contoh, ia menyediakan jenis input baru seperti e -mel, URL, dan nombor, yang secara automatik mengesahkan data input berdasarkan jenis. Ia juga memperkenalkan atribut baru seperti yang diperlukan, corak, dan min/max yang membolehkan anda menentukan pelbagai kekangan pada data input. Selain itu, HTML5 menyediakan API pengesahan terbina dalam yang membolehkan anda melakukan pengesahan tersuai menggunakan JavaScript. sahaja. HTML5 menyediakan beberapa jenis input dan atribut baru yang membolehkan anda menentukan pelbagai kekangan pada data input. Sebagai contoh, anda boleh menggunakan atribut yang diperlukan untuk membuat medan wajib, atribut corak untuk menguatkuasakan format tertentu, dan atribut Min/Max untuk menetapkan julat untuk input berangka. Walau bagaimanapun, untuk pengesahan yang lebih kompleks, anda masih perlu menggunakan JavaScript. mesej ralat. Anda boleh menggunakan kaedah setCustomvalidity objek ValidityState untuk menetapkan mesej ralat tersuai untuk medan. Kaedah ini mengambil hujah rentetan, yang menjadi mesej pengesahan medan apabila medan tidak sah. Anda boleh memanggil kaedah ini sebagai tindak balas kepada peristiwa yang tidak sah, yang dipecat apabila bidang gagal pengesahan. atribut novalidate ke elemen borang. Apabila atribut ini hadir, penyemak imbas tidak akan melakukan apa -apa pengesahan pada borang apabila ia diserahkan. Ini berguna jika anda ingin mengendalikan pengesahan sepenuhnya di sisi pelayan atau menggunakan JavaScript tersuai. Dalam perjalanan untuk mengesahkan pelbagai bidang bersama -sama. Walau bagaimanapun, anda boleh mencapai ini menggunakan JavaScript. Anda boleh menulis fungsi pengesahan tersuai yang memeriksa nilai pelbagai bidang dan menetapkan mesej kesahihan tersuai jika mereka tidak memenuhi kriteria yang diperlukan. Anda boleh memanggil fungsi ini sebagai tindak balas kepada acara penyerahan borang atau peristiwa input/perubahan bidang. tidak menyediakan cara terbina dalam untuk mengesahkan bidang berdasarkan nilai medan lain. Walau bagaimanapun, anda boleh mencapai ini menggunakan JavaScript. Anda boleh menulis fungsi pengesahan tersuai yang memeriksa nilai satu bidang terhadap nilai medan lain dan menetapkan mesej kesahihan tersuai jika mereka tidak sepadan. Anda boleh memanggil fungsi ini sebagai tindak balas kepada peristiwa input/perubahan bidang.

bagaimana saya boleh melakukan pengesahan asynchronous dalam html5?

html5 tidak menyokong pengesahan tak segerak daripada kotak. Walau bagaimanapun, anda boleh mencapai ini menggunakan JavaScript. Anda boleh menulis fungsi pengesahan tersuai yang melakukan operasi tak segerak, seperti permintaan Ajax, dan menetapkan mesej kesahihan tersuai berdasarkan hasilnya. Anda boleh memanggil fungsi ini sebagai tindak balas kepada peristiwa input/perubahan medan atau acara penyerahan borang. Mesej dalam pengesahan bentuk HTML5 ditentukan oleh penyemak imbas dan tidak boleh digayakan secara langsung menggunakan CSS. Walau bagaimanapun, anda boleh membuat mesej ralat tersuai menggunakan JavaScript dan gaya mereka seperti yang anda suka. Anda boleh menggunakan API Pengesahan untuk menentukan bila bidang tidak sah dan memaparkan mesej ralat tersuai dengan sewajarnya. Borang HTML dengan memasukkan pelbagai jenis data ke dalam bidang dan cuba menyerahkan borang tersebut. Anda harus menguji dengan data yang sah dan tidak sah untuk memastikan bahawa pengesahan berfungsi dengan betul dalam semua kes. Anda juga boleh menggunakan alat ujian atau perpustakaan automatik untuk melakukan ujian yang lebih komprehensif.

Atas ialah kandungan terperinci Panduan Lengkap untuk Borang HTML dan Pengesahan Kekangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!