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
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
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)
Topik panas
1653
14
1413
52
1304
25
1251
29
1224
24
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
Memindahkan Teks dalam HTML
Sep 04, 2024 pm 04:45 PM
Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
