Rumah >hujung hadapan web >html tutorial >Bagaimana saya menggunakan html5 & lt; form & gt; elemen dan atributnya untuk pengesahan borang?
<form></form>
dan atributnya untuk pengesahan borang? HTML5 menyediakan keupayaan pengesahan borang terbina dalam melalui atribut secara langsung dalam <form></form>
dan elemen input. Ini menghapuskan keperluan untuk JavaScript yang luas dalam banyak kes, memudahkan pembangunan dan penyelenggaraan. Berikut adalah cara anda boleh memanfaatkan atribut ini:
required
: Atribut ini menjadikan medan wajib. Jika pengguna meninggalkan medan kosong dan menyerahkan borang, penyemak imbas akan menghalang penyerahan dan memaparkan mesej ralat lalai. Contoh: <input type="text" name="name" required>
pattern
: Atribut ini membolehkan anda menentukan ungkapan biasa untuk mengesahkan input terhadap. Ini berkuasa untuk menguatkuasakan format tertentu, seperti alamat e -mel atau nombor telefon. Contoh: <input type="text" name="email" pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$">
Perhatikan bahawa contoh ini menggunakan corak e-mel asas; Corak yang lebih mantap mungkin diperlukan untuk aplikasi pengeluaran.minlength
dan maxlength
: Atribut ini menentukan bilangan minimum dan maksimum aksara yang dibenarkan dalam medan input teks. Contoh: <input type="text" name="password" minlength="8" maxlength="20">
min
dan max
: Atribut ini digunakan untuk jenis input angka (seperti <input type="number">
) untuk menentukan nilai minimum dan maksimum yang boleh diterima. Contoh: <input type="number" name="age" min="18" max="100">
type
Atribut: Atribut type
itu sendiri memainkan peranan penting dalam pengesahan. Sebagai contoh, menggunakan type="email"
akan mencetuskan pengesahan e-mel terbina dalam pelayar, dan type="url"
akan mengesahkan URL.element.validity.valid
, element.validity.valueMissing
) dan mesej ralat ( element.validationMessage
).<form></form>
?Pengendalian penyerahan borang yang berkesan selepas pengesahan HTML5 melibatkan gabungan pengesahan sisi pelanggan dan (idealnya). Bergantung semata-mata pada pengesahan sisi klien adalah tidak selamat, kerana pengguna berniat jahat dapat memintasnya.
submit
borang dan menggunakan event.preventDefault()
. Kemudian, hanya serahkan borang selepas pas pengesahan JavaScript anda.Walaupun mesej ralat lalai penyemak imbas membantu, mesej ralat tersuai dengan ketara meningkatkan pengalaman pengguna dengan menyediakan lebih banyak konteks dan kejelasan.
setCustomValidity()
: Kaedah setCustomValidity()
membolehkan anda menggantikan mesej ralat lalai dengan satu adat. Ini dilakukan dalam JavaScript. Contoh:<code class="javascript">const myInput = document.getElementById("myInput"); if (myInput.value.length </code>
Ya, mengintegrasikan pengesahan bentuk HTML5 dengan JavaScript membolehkan anda membuat peraturan pengesahan yang lebih canggih yang melampaui keupayaan atribut HTML5 sahaja.
input
(pengesahan masa nyata) atau pada acara submit
(pengesahan sebelum penyerahan).fetch
atau Ajax) untuk mengelakkan menyekat antara muka pengguna.Dengan menggabungkan kuasa pengesahan terbina dalam HTML5 dengan fleksibiliti JavaScript, anda boleh membuat bentuk yang mantap dan mesra pengguna dengan pengesahan yang komprehensif. Ingat bahawa pengesahan sisi pelayan tetap penting untuk keselamatan.
Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; form & gt; elemen dan atributnya untuk pengesahan borang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!