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.

<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>


<div class="formData">
<form action="#">
Name: <input type="text" name="name" required>
<input type="submit">
</form>
</div>

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

<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>


<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>

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 tag ditambahkan.

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!