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
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
< /p>
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."
KesimpulanDalam 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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1376
52
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
Bagaimanakah saya mengoptimumkan kod JavaScript untuk prestasi dalam penyemak imbas?
Mar 18, 2025 pm 03:14 PM
Artikel ini membincangkan strategi untuk mengoptimumkan prestasi JavaScript dalam pelayar, memberi tumpuan kepada mengurangkan masa pelaksanaan dan meminimumkan kesan pada kelajuan beban halaman.
Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan?
Apr 04, 2025 pm 02:42 PM
Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...
Bagaimanakah saya boleh debug kod javascript dengan berkesan menggunakan alat pemaju pelayar?
Mar 18, 2025 pm 03:16 PM
Artikel ini membincangkan debugging JavaScript yang berkesan menggunakan alat pemaju pelayar, memberi tumpuan kepada menetapkan titik putus, menggunakan konsol, dan menganalisis prestasi.
Bagaimanakah saya menggunakan peta sumber untuk debug kod JavaScript minified?
Mar 18, 2025 pm 03:17 PM
Artikel ini menerangkan cara menggunakan peta sumber untuk debug JavaScript minifikasi dengan memetakannya kembali ke kod asal. Ia membincangkan membolehkan peta sumber, menetapkan titik putus, dan menggunakan alat seperti Chrome Devtools dan Webpack.
Bagaimana saya menggunakan kerangka koleksi Java dengan berkesan?
Mar 13, 2025 pm 12:28 PM
Artikel ini meneroka penggunaan rangka koleksi Java yang berkesan. Ia menekankan memilih koleksi yang sesuai (senarai, set, peta, giliran) berdasarkan struktur data, keperluan prestasi, dan keselamatan benang. Mengoptimumkan penggunaan pengumpulan melalui cekap
TypeScript untuk pemula, Bahagian 2: Jenis Data Asas
Mar 19, 2025 am 09:10 AM
Sebaik sahaja anda telah menguasai tutorial TypeScript peringkat kemasukan, anda harus dapat menulis kod anda sendiri dalam IDE yang menyokong TypeScript dan menyusunnya ke dalam JavaScript. Tutorial ini akan menyelam ke dalam pelbagai jenis data dalam TypeScript. JavaScript mempunyai tujuh jenis data: null, undefined, boolean, nombor, rentetan, simbol (diperkenalkan oleh ES6) dan objek. Typescript mentakrifkan lebih banyak jenis atas dasar ini, dan tutorial ini akan meliputi semuanya secara terperinci. Jenis data null Seperti JavaScript, Null dalam TypeScript
Bermula dengan Chart.js: Pie, Donut, dan Carta Bubble
Mar 15, 2025 am 09:19 AM
Tutorial ini akan menerangkan cara membuat carta pai, cincin, dan gelembung menggunakan carta.js. Sebelum ini, kami telah mempelajari empat jenis carta carta.js: carta baris dan carta bar (tutorial 2), serta carta radar dan carta rantau polar (Tutorial 3). Buat carta pai dan cincin Carta pai dan carta cincin sangat sesuai untuk menunjukkan perkadaran keseluruhan yang dibahagikan kepada bahagian yang berlainan. Sebagai contoh, carta pai boleh digunakan untuk menunjukkan peratusan singa lelaki, singa wanita dan singa muda dalam safari, atau peratusan undi yang diterima oleh calon yang berbeza dalam pilihan raya. Carta pai hanya sesuai untuk membandingkan parameter tunggal atau dataset. Harus diingat bahawa carta pai tidak dapat menarik entiti dengan nilai sifar kerana sudut kipas dalam carta pai bergantung pada saiz berangka titik data. Ini bermaksud mana -mana entiti dengan perkadaran sifar
