Rumah > Artikel > hujung hadapan web > Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?
Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?
- WBOYke hadapan
- 2023-09-07 14:33:02860semak imbas
Perlindungan kata laluan ialah langkah keselamatan penting untuk halaman web yang mengandungi maklumat sensitif atau memerlukan pengesahan untuk mengakses. Jika anda ingin menambah keselamatan tambahan pada halaman web anda tanpa menggunakan bahasa sebelah pelayan, anda boleh melindungi kata laluan halaman anda menggunakan HTML, CSS dan JavaScript.
Artikel ini akan menunjukkan kepada anda cara membuat borang ringkas yang memerlukan pengguna memasukkan kata laluan untuk melihat kandungan halaman yang dilindungi. Mari lihat contoh berikut untuk lebih memahami menggunakan kata laluan untuk melindungi halaman.
Contoh
Dalam contoh di bawah, kami menjalankan skrip dan melindungi halaman web jika pengguna cuba mengakses halaman web, mereka akan diminta untuk kata laluan mereka.
<!DOCTYPE html>
<html>
<body>
<script>
var password = "tutorial";
(function passcodeprotect() {
var passcode = prompt("Enter PassCode");
while (passcode !== password) {
alert("Incorrect PassCode");
return passcodeprotect();
}
}());
alert('Welcome To The TP..!');
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan amaran meminta kata laluan. Apabila pengguna memadankan kata laluan ("tutorial"), mesej dipaparkan jika tidak, kata laluan yang salah dipaparkan pada halaman web.
Contoh
Pertimbangkan contoh berikut di mana kami mencipta medan input untuk kata laluan yang dimasukkan untuk melindungi halaman web serta klik butang.
<!DOCTYPE HTML>
<html>
<body>
<center>
<input type="password" placeholder="passcode" id="tutorial">
<button onclick="protectpasscode()">CHECK</button>
<script>
function protectpasscode() {
const result = document.getElementById("tutorial").value;
let passcode = 12345;
let space = '';
if (result == space) {
alert("Type passcode")
} else {
if (result == passcode) {
document.write("<center><h1>TP, The Best E-Learning </h1></center>");
} else {
alert("Incorrect Passcode");
location.reload();
}
}
}
</script>
</center>
</body>
</html>
Apabila anda menjalankan skrip di atas, tetingkap output akan muncul menunjukkan medan input untuk memasukkan kata laluan dan butang klik pada halaman web. Jika pengguna sepadan dengan kata laluan (12345), ia akan membuka borang yang terdiri daripada teks jika tidak, kata laluan yang salah akan dipaparkan.
Contoh
Laksanakan contoh di bawah di mana kami menjalankan skrip untuk melindungi halaman web daripada memaparkan kandungannya selepas melaksanakan skrip.
<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
Enter Password:
<input type='text' value='' id='input'><br><br>
<input type='checkbox' onclick='protectpasscode()'>Show results
<p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
cricketer who was captain of the Indian national cricket team in limited-overs formats
from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
<script>
function protectpasscode() {
var a = document.getElementById('input');
var b = document.getElementById('tutorial');
if (a.value === '54') {
b.style.display = 'block';
} else {
b.style.display = 'none';
}
}
</script>
</body>
</html>
Apabila skrip dilaksanakan, ia akan menghasilkan output yang menunjukkan medan input untuk memasukkan kata laluan dan kotak semak togol pada halaman web. Apabila pengguna memadankan kata laluan (54) dan menogol kotak semak, kandungan dalam halaman web dipaparkan.
Atas ialah kandungan terperinci Bagaimana untuk melindungi kata laluan halaman menggunakan HTML, CSS dan JavaScript sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!