Pengesahan Borang HTML
Pengesahan borang HTML ialah satu proses memeriksa kandungan halaman borang HTML untuk mengelakkan data ralat dihantar ke pelayan. Proses ini merupakan langkah penting dalam membangunkan aplikasi web berasaskan HTML, kerana ia boleh meningkatkan kualiti halaman web atau aplikasi web dengan mudah. Terdapat dua cara untuk melaksanakan Pengesahan borang HTML, dan ia adalah dengan Menggunakan fungsi terbina dalam HTML5 dan dengan Menggunakan JavaScript.
Pengesahan Borang HTML
Terdapat terutamanya dua cara pengesahan borang HTML boleh dilakukan,
- Menggunakan fungsi terbina dalam HTML5
- Menggunakan JavaScript
1. Menggunakan fungsi terbina dalam HTML5
HTML5 menyediakan ciri pengesahan borang ini tanpa menggunakan JavaScript. Elemen borang akan mempunyai atribut pengesahan ditambah, yang akan membolehkan pengesahan borang untuk kami secara automatik. Atribut pengesahan membolehkan kami menentukan pelbagai jenis peraturan pada elemen borang kami. Ia membenarkan kami menetapkan panjang data, menetapkan sekatan pada nilai data, dsb.
Mari kita lihat satu contoh mudah pengesahan borang HTML menggunakan elemen pengesahan borang terbina dalam dan kemudian akan meneruskan lebih jauh untuk pengesahan borang HTML menggunakan JavaScript.
Contoh
Pengesahan Borang menggunakan atribut pengesahan HTML5 – Dalam contoh ini, kami akan menggunakan teg pengesahan borang yang diperlukan, yang akan menyebabkan data dalam medan tersebut wajib dimasukkan; jika tidak, borang tidak akan dihantar. Di bawah ialah coretan kod untuk perkara yang sama, bersama-sama dengan beberapa penggayaan borang web.
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
</style>
</head>
<body>
<div class = "formData" >
<form action = "#" >
Name: <input type = "text" name = "name" required>
<input type = "submit" >
</form>
</div>
</body>
</html>
Jadi kami mempunyai borang web yang sangat mudah bersama-sama dengan hanya satu medan data input sebagai "Nama". Sila ambil perhatian bahawa kami telah menggunakan kata kunci yang diperlukan dalam elemen teg input.
Output:
Mari cuba serahkan borang tanpa memasukkan sebarang nilai dalam medan nama. Selepas menyerahkan, anda akan mendapat mesej ralat sebagai "Sila isi medan ini", dan borang tidak akan diserahkan.
Output dengan data kosong:
Jadi dapat dilihat bahawa mesej ralat tidak ditambahkan oleh kami dan disediakan oleh HTML sendiri.
Seperti atribut yang diperlukan yang disediakan oleh HTML, terdapat pelbagai teg borang yang tersedia untuk digunakan. Di bawah ialah senarai beberapa teg pengesahan borang,
- panjang min: Digunakan untuk menetapkan panjang minimum elemen yang diperlukan
- panjang maksimum: Digunakan untuk menetapkan panjang maksimum elemen yang diperlukan
- corak: Digunakan untuk menentukan ungkapan regex
2. Menggunakan JavaScript
JavaScript digunakan secara meluas untuk pengesahan borang HTML kerana ia menyediakan lebih banyak cara untuk menyesuaikan dan menetapkan peraturan pengesahan; juga, beberapa teg yang disediakan dalam HTML5 tidak disokong dalam versi Internet Explorer yang lebih lama. JavaScript sedang digunakan untuk masa yang lama untuk pengesahan borang.
Dalam pengesahan borang JavaScript, pada asasnya, kami mentakrifkan fungsi untuk mengesahkan data sebelum menyerahkannya kepada pelayan. Kami boleh melaksanakan sebarang logik yang diperlukan untuk mencapai peraturan pengesahan. JavaScript lebih fleksibel dengan cara ini kerana tiada sekatan untuk menentukan peraturan. Tetapi adalah perlu untuk mengetahui JavaScript untuk melaksanakan perkara ini berbanding dengan pengesahan borang menggunakan teg terbina dalam.
Mari lihat contoh pengesahan borang menggunakan JavaScript. Kami akan melaksanakan contoh borang yang sama dengan hanya satu input sebagai elemen nama.
Contoh
<!DOCTYPE html>
<html>
<head>
<style>
.formData {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
}
form {
font-size: 30px;
}
form input {
margin-left: 10px;
font-size: 15px;
}
.errorMessage {
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
}
.errorMessage.top-arrow:after {
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
}
</style>
</head>
<body>
<div class = "formData" >
<form name = "simpleForm" action = "#" onsubmit = "return validateForm()" >
Name: <input type = "text" name = "name">
<input type = "submit" >
</form>
<p class = "errorMessage top-arrow" > </p>
</div>
<script>
function validateForm() {
var nameVal = document.forms["simpleForm"]["name"].value;
if(nameVal == null || nameVal == "") {
document.getElementsByClassName( "errorMessage" )[0].style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )[0].innerHTML = "Please Fill out this field";
return false;
} else {
return true;
}
}
</script>
</body>
</html>
Daripada contoh sebelumnya, kami telah mengalih keluar teg yang diperlukan daripada elemen borang "nama". Sebaliknya, kami telah menambah satu teg semasa diserahkan dalam elemen borang. Seperti yang dinyatakan sebelum ini, kami akan menulis fungsi untuk pengesahan yang mana
Kami telah menulis fungsi bernama validateForm() yang akan melakukan pengesahan. Kami melaksanakan peraturan yang sama untuk menyemak sama ada data yang dimasukkan dalam medan nama kosong atau tidak. Logik untuk menyemak ini adalah dengan mengklik butang hantar, fungsi ini akan dipanggil, dan nilai yang dimasukkan akan diperiksa sama ada ia batal atau kosong. Fungsi ini akan kembali benar sekiranya data tidak batal atau kosong, tetapi jika data kosong atau batal, maka mesej ralat dipaparkan kepada pengguna.
Output:
Jika kami cuba menyerahkan borang tanpa memasukkan sebarang data, kami sepatutnya mendapat mesej ralat pada skrin. Seperti yang dapat dilihat daripada contoh, kami telah mereka bentuk mesej ralat dengan cara yang sama mungkin.
Output dengan data kosong:
Kesimpulan- Pengesahan Borang HTML
Jadi, kami telah melihat contoh pengesahan borang yang sangat mudah di bahagian pelanggan. Terutamanya terdapat dua cara untuk melaksanakan pengesahan borang HTML. Yang pertama menggunakan fungsi terbina dalam yang disediakan dalam HTML5, dan yang kedua adalah dengan menggunakan JavaScript. Menggunakan kaedah pertama, kami tidak perlu menulis kod tambahan.
Atas ialah kandungan terperinci Pengesahan Borang HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undress AI Tool
Gambar buka pakaian secara percuma
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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)
Bagaimana untuk memusatkan div dalam html5?
Aug 21, 2025 pm 05:32 PM
TOcenteradivHorizontally, useMargin: 0AutowithadeFinedWidth.2.forhorizontalandverticalcentering, applyDisplay: flexOnTheParentWithJustify-content: centerandalagn-items: center.3.alternative, usecssgridwithwith.4.
Cara menyekat jenis fail untuk input muat naik dalam html
Aug 24, 2025 am 02:57 AM
Gunakan atribut terima untuk mengehadkan jenis muat naik fail html, seperti menerima = "imej/*" hanya membenarkan imej, terima = ". Pdf" hanya membenarkan pdf, terima = ". Sokongan penyemak imbas adalah berbeza, dan ia hanya digunakan untuk meningkatkan ketersediaan dan bukannya menggantikan pengesahan pelayan.
Bagaimana untuk mewakili output komputer menggunakan elemen SAMP dalam HTML5?
Aug 21, 2025 pm 05:00 PM
Gunakan elemen untuk mewakili output program, skrip atau sistem komputer, seperti paparan terminal, mesej ralat atau hasil kod; 2. Gunakannya apabila perlu membezakan kandungan yang dihasilkan oleh komputer dari teks lain untuk meningkatkan ketepatan akses dan semantik; 3. Sintaks asas adalah sampelOutputText; 4. Ia boleh digabungkan dengan format, atau bersarang untuk membezakan input dan output kod dengan jelas; 5. Amalan terbaik termasuk hanya digunakan untuk output sistem sebenar, mengelakkan penyalahgunaan visual, dan bekerjasama dengan CSS dan bukannya semantik pengganti; 6. Walaupun pembaca skrin tidak boleh disiarkan secara khusus, penggunaan yang betul dapat meningkatkan struktur dokumen dan pemahaman teknologi bantuan. Oleh itu, ia adalah tag semantik penting yang meningkatkan ketepatan dan kebolehcapaian HTML.
Cara Menggunakan Atribut HTML5 Contentedable
Aug 23, 2025 am 09:55 AM
TheContentititableatTributeMakeshtmlelementsedByAddingContentedied boleh
Cara Menambah Favicon ke laman web anda dengan HTML5
Aug 27, 2025 am 02:35 AM
Untuk menambah laman web favicon dengan betul, mula -mula sediakan 32 × 32 atau 64 × 64 piksel .ico, .png atau .svg format ikon fail dan namakannya favicon.ico, dan lain -lain, letakkan di dalam direktori akar laman web atau laluan tertentu, dan kemudian gunakan pernyataan yang jelas dalam tag html. Sebagai contoh: Adalah disyorkan untuk menyokong pelbagai format dan peranti pada masa yang sama, seperti menambah versi saiz PNG yang berbeza, ikon SVG, dan ikon sentuhan Apple. Akhirnya, kosongkan cache dan uji sama ada ia memaparkan secara normal, untuk memastikan bahawa laluan itu betul dan fail boleh diakses. Seluruh proses memerlukan perhatian kepada format fail, laluan dan keserasian untuk mengelakkan kegagalan memuatkan.
Cara menggunakan tag nav html5 dengan betul
Aug 22, 2025 am 01:36 AM
Gunakan tag untuk menentukan blok pautan navigasi utama laman web untuk meningkatkan kebolehcapaian dan SEO; 2. Gunakan hanya di kawasan navigasi utama seperti menu navigasi utama, pautan sidebar, paging atau katalog, bukannya setiap pautan; 3. Pek pautan di dalamnya dan cadangkan atau atur pautan untuk meningkatkan semantik dan aksesibiliti; 4. Elakkan terlalu banyak atau blok yang tidak perlu untuk memastikan struktur yang jelas; 5. Tambah label aria untuk berbilang untuk membezakan kegunaan; 6. Jangan letakkan kandungan bukan navigasi seperti maklumat hak cipta, dan elakkan tanda-tanda berstruktur yang hilang dari senarai pautan. Penggunaan yang betul dapat meningkatkan kebolehgunaan dan organisasi laman web.
Apakah perbezaan antara artikel dan bahagian dalam HTML5?
Aug 22, 2025 am 08:29 AM
UseForself-contained, bebas yang boleh diketengahkan
Apakah kepentingan atribut alt untuk imej dalam html5?
Aug 27, 2025 am 02:29 AM
Thealtattributeisessesscentialforaccessibility, seo, anduserexperience; 1.itenablesscreenreenerstodescribeimagestovisuallympairedusers, memastikancontentcomprehension; 2.itdisplaysfallbacktextHenimageSfailtoload, mengekalkanContext;
