"/> ">
cari

Rumah >hujung hadapan web >tutorial js >Bentuk atribut yang diperlukan menggunakan mesej pengesahan tersuai dalam HTML5

Bentuk atribut yang diperlukan menggunakan mesej pengesahan tersuai dalam HTML5

WBOY
WBOYke hadapan
2023-08-25 10:29:15693semak imbas

使用 HTML5 中的自定义验证消息形成必需属性

HTML5 merangkumi banyak ciri pengesahan borang terbina dalam, membolehkan pembangun menambahkan pengesahan pada borang mereka dengan mudah. Salah satu ciri ini ialah atribut "diperlukan", yang menyatakan bahawa medan input diperlukan dan mesti diisi sebelum borang boleh diserahkan.

Atribut "diperlukan" ialah atribut boolean. Jika terdapat sebarang medan input dalam borang dengan atribut "diperlukan", medan ini mesti diisi sebelum menyerahkan borang.

Jika medan khusus ini dibiarkan kosong sebelum menyerahkan borang, pengguna akan melihat mesej ralat dalam penyemak imbas mereka yang memaklumkan bahawa medan input ini diperlukan.

Gunakan atribut "diperlukan"

Untuk menggunakan atribut "diperlukan", cuma tambahkan atribut pada medan input yang anda mahu jadikan diperlukan -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required>
   </form>
</body>
</html>

Pelayar akan mengesahkan bahawa medan input telah diisi sebelum menyerahkan borang, dan jika tidak, mesej ralat akan dipaparkan. Bergantung pada penyemak imbas, mesej ralat lalai mungkin berbeza-beza, tetapi biasanya menyatakan bahawa medan itu diperlukan.

Mesej pengesahan tersuai

Kami juga boleh menukar mesej untuk input tidak sah dengan menyatakan mesej unik yang akan dihantar kepada pengguna apabila medan tidak sah. Kami boleh menukar mesej pengesahan lalai menggunakan atribut "tajuk" -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" required title="Please enter your name">
   </form>
</body>
</html>

Jika medan input dibiarkan kosong semasa menghantar borang, kod ini akan memaparkan mesej "Sila masukkan nama anda" kepada pengguna.

Untuk menentukan ungkapan biasa yang input mesti sepadan setiap kali borang diisi, HTML5 menyediakan elemen "corak" sebagai tambahan kepada atribut "tajuk", membenarkan pengaturcara menentukan ungkapan biasa yang input mesti sepadan untuk diterima . Jika input tidak sepadan dengan corak yang diperlukan, pengguna akan melihat pemberitahuan ralat dalam penyemak imbas

Contoh

Berikut ialah contoh cara menggunakan atribut "corak" untuk menentukan panjang minimum medan input -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
   </form>
</body>
</html>

Jika input tidak memenuhi kriteria ini, mesej "Sila masukkan sekurang-kurangnya 3 aksara" akan dipaparkan. Kod ini memerlukan medan input mengandungi sekurang-kurangnya 3 aksara.

Gaya mesej ralat tersuai

Menggunakan CSS, anda boleh menukar rupa mesej ralat. Secara lalai, mesej ralat ditambahkan pada medan input sebagai nod teks kecil dan ditulis dalam fon merah. Walau bagaimanapun, kami boleh mengubah suai penampilan mesej ralat dan mengawal cara ia muncul menggunakan CSS.

Kelas pseudo ":invalid" boleh digunakan untuk memilih medan input jika ia tidak sah dan sifat CSS boleh digunakan untuk menukar gaya mesej ralat.

Contoh

Berikut ialah contoh cara untuk menyesuaikan gaya mesej ralat menggunakan CSS -

<html>
   <style>
      input:invalid {
         border: 2px solid red;
      }
      input:invalid + span {
         color: red;
         font-weight: bold;
      }
   </style>
   <body>
      <form>
         <label for="name">Name:</label>
         <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
      </form>
   </body>
</html>

Apabila medan input tidak sah, kod ini akan menjadikan jidarnya merah dan memaparkan mesej ralat dalam huruf tebal dan merah.

Sesuaikan mesej ralat menggunakan JavaScript

Selain menggunakan CSS, kami juga boleh menggunakan JavaScript untuk menyesuaikan mesej ralat dan mengawal cara ia dipaparkan.

Untuk menyesuaikan mesej ralat menggunakan JavaScript, kami boleh menggunakan kaedah "setCustomValidity", yang membolehkan kami menentukan mesej ralat tersuai untuk medan input.

Contoh

Berikut ialah contoh cara untuk menetapkan mesej ralat tersuai menggunakan kaedah "setCustomValidity" -

<html>
<body>
   <h2>JavaScript Validation</h2>
   <p>Enter a number and click OK:</p>
   <input id="InputField" type="text" required>
   <button onclick="myFunction()">OK</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         const txt = document.getElementById("InputField").value;
         console.log(txt);
         const txtLen = txt.length;
         console.log(txtLen);
         if (txtLen<3) {
            document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
         } else {
            document.getElementById("demo").innerHTML = "Input OK";
         }
      }
   </script>
</body>
</html>

Kod ini akan menetapkan mesej ralat medan input kepada "Sila masukkan nilai yang sah."

Kesimpulan

Dalam artikel ini, kami melihat cara menggabungkan mesej pengesahan diperibadikan dengan elemen "diperlukan" HTML5. Kami telah membincangkan asas pengesahan borang, teg "diperlukan" dan cara memanfaatkan JavaScript dan CSS untuk memperibadikan mesej pengesahan.

Pembangun boleh menambah pengesahan borang dengan cepat pada borang HTML5 dan memastikan pengguna telah memberikan maklumat yang diperlukan dengan memanfaatkan elemen "diperlukan" dan menyesuaikan mesej pengesahan. Banyak aplikasi web bergantung pada pengesahan borang kerana ia merupakan alat penting untuk memastikan ketepatan dan kesempurnaan input pengguna.

Atas ialah kandungan terperinci Bentuk atribut yang diperlukan menggunakan mesej pengesahan tersuai dalam HTML5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html5 css 正则表达式 表单验证 伪类
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan kelegapan sempadan apabila memindahkan segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi