membuat captcha sederhana dengan javascript

cara membuat captcha sederhana dengan javascript

Hallo semua pada kesempatan kali ini saya akan membagikan cara membuat captcha sederhana dengan javascript random string, jadi nantinya captcha tersebut berupa teks dan anggka yang di acak.

saya kepikiran membuat tutorial ini karena beberapa waktu lalu saya melihat member - member di grup saya lagi mengbahas plugin captcha, jadi saya kepikiran untuk membuat captcha yang lebih simple dengan javascript.

sekilas info captcha adalah fitur yang memberikan lapisan keamanan pada website untuk memastikan bahwa website diakses oleh manusia sungguhan bukan robot.

script yang akan saya bagikan hanyalah dasarnya saja, selebihnya silakan kalian kembangkan kembali dan bisa kalian kombinasikan di website / blog kalian sesuai kebutuhan.

pertama buat lah html input seperti di bawah ini, agar lebih menarik silakan kalian tambahkan css sendiri.

<div class='box'>WDhq2</div>
<input class="input" type="text" name="captcha" onkeyup="cekCaptcha()"/>

dan buatlah javascript seperti di bawah ini.

function randomString(len,charSet)	{
	charSet = charSet || 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
	var randomString = '';
	for (var i = 0; i < len; i++){
		var randomPoz = Math.floor(Math.random() * charSet.length);
		randomString += charSet.substring(randomPoz,randomPoz+1);
	}
	return randomString;
}

function cekCaptcha(){
	var inputUser = document.querySelector(".input");
	var captcha = document.querySelector(".box").innerHTML;

	if(inputUser.value === captcha){ // jika captcha benar jalankan fungsi di bawah ini
		alert('captcha benar');

	}else if (inputUser.value.length === 5 && inputUser.value != captcha){ // jika captcha salah kosongkan bidang input dan acak captcha
		inputUser.value ='';
		document.querySelector(".box").innerHTML = randomString(5);

	}
}

ok jadi sekian cara membuat captcha sederhana dengan javascript yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.