Pengesahan bentuk sampingan pelanggan boleh dilakukan tanpa JavaScript dengan menggunakan atribut HTML. 1) Gunakan yang diperlukan untuk menguatkuasakan medan wajib. 2) Mengesahkan e -mel dan URL dengan atribut jenis seperti e -mel atau URL, atau gunakan corak dengan regex untuk format tersuai. 3) Hadkan nilai menggunakan min, max, minlength, dan maxLength. 4) Sesuaikan mesej ralat dengan API Pengesahan Kekangan, walaupun ini hanya terhad dan pelanggan sahaja. Sentiasa sahkan data sekali lagi di sisi pelayan untuk keselamatan dan ketepatan.

Pengesahan bentuk sampingan pelanggan adalah bahagian utama bangunan borang web yang mesra pengguna dan selamat. Berita baik? Anda tidak selalu memerlukan JavaScript untuk melakukannya. HTML mempunyai atribut terbina dalam yang membolehkan anda mengesahkan input pengguna asas tepat dalam penyemak imbas. Berikut adalah cara menggunakannya dengan berkesan tanpa mengatasi perkara yang mengatasi.

Penggunaan required untuk medan wajib

Atribut pengesahan yang paling mudah dan paling biasa required . Apabila ditambah ke medan input, ia memberitahu penyemak imbas bahawa pengguna mesti mengisi sebelum menyerahkan borang tersebut.

Contohnya:

 <input type = "text" name = "nama pengguna" diperlukan>

Ini berfungsi dengan baik untuk medan seperti nama, e -mel, kata laluan - apa -apa di mana meninggalkannya kosong akan memecahkan langkah seterusnya. Penyemak imbas akan menunjukkan mesej lalai jika seseorang cuba menyerahkan tanpa mengisinya.

Petua Pro: Gabungkan required dengan atribut lain untuk pengesahan yang lebih kuat, seperti memastikan e -mel kelihatan seperti alamat e -mel sebenar.

Mengesahkan input e -mel dan URL dengan type dan pattern

HTML5 memperkenalkan beberapa jenis input seperti email , url , dan number yang secara automatik memeriksa jika formatnya sepadan dengan apa yang diharapkan.

Contohnya:

 <input jenis = "e -mel" name = "e -mel" diperlukan>

Ini memastikan pengguna memasuki sesuatu yang kelihatan seperti e -mel (seperti user@example.com). Sama berlaku untuk URL. Jika anda mahu lebih banyak kawalan, seperti menguatkuasakan format tertentu, gunakan atribut pattern dengan ungkapan biasa.

Contoh:

 <input type = "text" name = "zipcode" corak = "\ d {5}" Diperlukan>

Garis itu hanya menerima kod zip 5 digit. Perlu diingat bahawa walaupun ini berguna, Regex boleh menjadi rumit - menguji corak anda dengan teliti.

Tetapkan nilai minimum dan maksimum dengan min , max , dan minlength / maxlength

Kadang -kadang anda perlu mengehadkan berapa banyak atau berapa sedikit seseorang yang boleh masuk. Untuk nombor, tarikh, atau panjang teks, atribut ini adalah rakan anda:

• min dan max bekerja pada nombor dan input tarikh
• Had minlength dan maxlength set aksara pada input berasaskan teks

Contoh:

 <input type = "Number" name = "usia" min = "18" max = "99">
<input type = "text" name = "username" minLength = "3" maxLength = "20">

Ini membantu menghalang kes -kes kelebihan seperti nama pengguna yang tidak masuk akal atau nilai umur yang tidak masuk akal.

Beberapa perkara yang perlu diingat:

• Pemeriksaan ini hanya berlaku pada penyerahan borang.
• Pengguna masih boleh menaip nilai tidak sah, tetapi borang itu tidak akan melalui sehingga mereka membetulkannya.

Sesuaikan mesej ralat (dengan beberapa batasan)

Secara lalai, pelayar menunjukkan mesej ralat mereka sendiri apabila pengesahan gagal. Tetapi anda boleh tweak mesej tersebut menggunakan API Pengesahan Kekangan JavaScript.

Inilah cara cepat untuk menukar mesej:

 <input jenis = "e -mel" id = "e -mel" diperlukan>
<script>
  const e -melInput = document.getElementById (&#39;e -mel&#39;);
  emailInput.addeventListener (&#39;tidak sah&#39;, fungsi (e) {
    e.target.setCustomValidity (&#39;Sila masukkan alamat e -mel yang sah.&#39;);
  });
</script>

Perlu diingat bahawa ini tidak menggantikan pengesahan penuh-pengguna masih boleh memintas cek sisi pelanggan sepenuhnya. Oleh itu, sentiasa menyemak semula data di sisi pelayan juga.

Pada asasnya, atribut pengesahan bentuk HTML memberi anda banyak kuasa dengan usaha yang minimum. Mereka hebat untuk pemeriksaan mudah dan meningkatkan pengalaman pengguna tanpa menulis skrip tersuai. Hanya jangan bergantung kepada mereka sahaja untuk keselamatan atau logik yang kompleks - itulah pengesahan backend.

Atas ialah kandungan terperinci Melaksanakan pengesahan borang klien menggunakan atribut HTML.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!