Apakah kaedah pengesahan borang dalam html5?

Kaedah pengesahan borang: 1. Tetapkan atribut yang diperlukan kepada benar dalam kawalan borang; 4. Tetapkan sifat min dan maks untuk kawalan borang dan tetapkan nilai minimum dan maksimum yang dibenarkan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

Hari ini mari kita bincangkan tentang pengesahan borang HTML5. Sebelum kita menyelami pengesahan borang, mari kita fikirkan tentang maksud pengesahan borang dahulu. Pada terasnya, pengesahan borang ialah sistem yang mengesan data kawalan tidak sah dan membenderakan ralat ini untuk pengguna akhir. Dalam erti kata lain, pengesahan borang melakukan satu siri semakan pada borang sebelum ia diserahkan kepada pelayan dan memberitahu pengguna untuk membetulkan ralat.

Tetapi apakah sebenarnya pengesahan borang?

ialah pengoptimuman.

Sebab pengesahan borang adalah pengoptimuman adalah kerana mekanisme pengesahan borang sahaja tidak mencukupi untuk memastikan data borang yang diserahkan kepada pelayan adalah betul dan sah. Sebaliknya, pengesahan borang direka untuk membuat aplikasi web membuang ralat lebih cepat. Dalam erti kata lain, sebaiknya gunakan mekanisme pengendalian terbina dalam penyemak imbas untuk memberitahu pengguna bahawa halaman web mengandungi nilai kawalan borang yang tidak sah. Pada masa lalu, data mengelilingi rangkaian hanya untuk pelayan memberitahu pengguna bahawa dia telah memasukkan data yang salah. Jika penyemak imbas mampu sepenuhnya membenarkan ralat ditangkap sebelum ia meninggalkan pelanggan, maka kita harus mengambil kesempatan daripada ini.

Walau bagaimanapun, semakan borang penyemak imbas tidak mencukupi untuk mengendalikan semua ralat.

Setelah berkata demikian, HTML5 memperkenalkan lapan kaedah untuk mengesahkan ketepatan data kawalan borang. Mari kita lihat mereka secara bergilir, tetapi pertama-tama kita akan memperkenalkan objek ValidityState yang digunakan untuk status pengesahan maklum balas.

Dalam penyemak imbas yang menyokong pengesahan borang HTML5, objek ValidityState boleh diakses melalui kawalan borang:

var valCheck = document.myForm.myInput.validity;

Barisan kod ini memperoleh objek ValidityState bagi elemen borang bernama myInput. Objek mengandungi rujukan kepada semua lapan keadaan pengesahan, serta hasil pengesahan akhir.

Kaedah panggilan adalah seperti berikut:

valCheck.valid

Selepas pelaksanaan, kami akan mendapat nilai Boolean, yang menunjukkan sama ada kawalan borang telah melepasi semua kekangan pengesahan. Atribut yang sah boleh dianggap sebagai hasil pengesahan akhir: jika semua lapan kekangan diluluskan, atribut yang sah adalah benar. Jika tidak, selagi satu kekangan gagal, bendera yang sah adalah palsu.

Seperti yang dinyatakan sebelum ini, terdapat lapan kemungkinan kekangan pengesahan untuk sebarang elemen bentuk. Setiap syarat mempunyai nama atribut yang sepadan dalam objek ValidityState, yang boleh diakses dengan cara yang sesuai. Mari analisa satu persatu untuk melihat cara ia dikaitkan dengan kawalan borang dan cara menyemaknya berdasarkan objek ValidityState:

1 valueMissing

Tujuan: Untuk memastikan nilai dalam kawalan borang Diisi.

Penggunaan: Tetapkan atribut yang diperlukan kepada benar dalam kawalan borang.

Contoh:

<input type="text" name="myText" required>

Penerangan terperinci: Jika kawalan borang menetapkan atribut yang diperlukan, kawalan akan kekal dalam keadaan tidak sah sehingga pengguna mengisi nilai atau mengisi nilai melalui panggilan kod. Sebagai contoh, kotak input teks kosong gagal semakan yang diperlukan melainkan sebarang teks dimasukkan ke dalamnya. Apabila nilai input kosong, valueMissing mengembalikan benar.

2. typeMismatch

Tujuan: Untuk memastikan bahawa nilai kawalan sepadan dengan jenis yang dijangkakan (seperti numbe, e-mel, URL, dll.).

Penggunaan: Tentukan jenis nilai atribut kawalan borang .

Contoh:

<input type="email" name="myEmail">

Penerangan terperinci: Jenis kawalan borang khas bukan sahaja digunakan untuk menyesuaikan papan kekunci telefon mudah alih Jika penyemak imbas dapat mengenali bahawa input dalam kawalan borang tidak mematuhi peraturan jenis yang sepadan, contohnya, tiada simbol @ dalam alamat e-mel, atau nilai input bagi kawalan jenis nombor bukan nombor yang sah, maka penyemak imbas akan menandakan kawalan untuk menunjukkan jenis yang tidak sepadan. Tanpa mengira keadaan ralat, typeMismatch akan kembali benar.

3. patternMismatch

Tujuan: Sahkan sama ada input dalam format yang sah mengikut peraturan format yang ditetapkan pada kawalan borang.

Penggunaan: Tetapkan atribut corak pada kawalan borang dan tetapkan peraturan padanan yang sesuai.

Contoh:

<input type="text" name="creditcardnumber" pattern="[0-9]{16}" title="A credit
card number is 16 digits with no spaces or dashes">

Butiran: Atribut corak menyediakan pembangun cara yang berkuasa dan fleksibel untuk menetapkan mekanisme pengesahan ungkapan biasa bagi nilai kawalan borang. Apabila atribut corak ditetapkan untuk kawalan, patternMismatch akan mengembalikan nilai sebenar selagi nilai kawalan input tidak mematuhi peraturan corak. Dari perspektif panduan pengguna dan rujukan teknikal, anda harus menetapkan atribut tajuk dalam kawalan borang yang mengandungi atribut corak untuk menggambarkan peranan peraturan.

4. terlaluLong

Tujuan: Untuk mengelakkan nilai input mengandungi terlalu banyak aksara.

Penggunaan: Tetapkan atribut maxLength pada kawalan borang.

Contoh:

<input type="text" name="limitedText" maxLength="140">

Butiran: Jika panjang nilai input melebihi maxLength, atribut tooLong akan kembali benar. Walaupun kawalan borang biasanya mengehadkan panjang maksimum input pengguna, terdapat situasi di mana panjang maksimum boleh melebihi, seperti dengan menetapkannya secara pemrograman.

5

目的：限制数值型控件的最小值。

用法：为表单控件设置min特性，并赋予允许的最小值。

示例：

<input type="range" name="ageCheck" min="18">

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限。此时，ValidityState的rangeUnderflow特性将返回true。

6、rangeOverflow

目的：限制数值型控件的最大值。

用法：为表单控件设置max特性，并赋予允许的最大值。

示例：

<input type="range" name="kidAgeCheck" max="12">

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max更大，特性将返回true。

7、stepMismatch

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

示例：

<input type="range" name="confidenceLevel" min="0" max="100" step="5">

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step特性值的倍数之和。例如，范围从0到100，step特性值为5，此时就不允许出现17，否则stepMismatch返回true值。

8、customError

目的：处理应用代码明确设置及计算产生的错误。

用法：调用setCustomValidity(message)将表单控件置于customError状态。

示例：

passwordConfirmationField.setCustomValidity("Password values do not match.");

详细说明：浏览器内置的验证机制不适用时，需要显示自定义验证错误信息。当输入值不符合语义规则时，应用程序代码应设置这些自定义验证消息。

自定义验证消息的典型用例是验证控件中的值是否一致。例如，密码和密码确认两个输人框的值不匹配。只要定制了验证消息，控件就会处于无效状态，并且customError返回true。要清除错误，只需在控件上调用setCustomValidity("")即可。

相关推荐：《html视频教程》

Atas ialah kandungan terperinci Apakah kaedah pengesahan borang dalam html5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!