Captcha là một kỹ thuật để bảo vệ các biểu mẫu HTML trên web
Ví dụ 1: index.html
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript how to Create Captcha</title>
<script type="text/javascript">
/* Function to Generat Captcha */
function DisplayCodeForQR() {
var first_arg = Math.ceil(Math.random() * 10) + '';
var second_arg = Math.ceil(Math.random() * 10) + '';
var third_arg = Math.ceil(Math.random() * 10) + '';
var str = new Array(4).join().replace(/(.|$)/g, function () { return ((Math.random() * 36) | 0).toString(36)[Math.random() < .5 ? "toString" : "toUpperCase"](); });
var results = str + first_arg + ' ' + second_arg + ' ' + third_arg;
document.getElementById("userCapt").value = results
}
/* Validating Captcha Function */
function CheckValidCaptcha() {
var str1 = removeSpaces(document.getElementById('userCapt').value);
var str2 = removeSpaces(document.getElementById('txtCompare').value);
if (str1 == str2) return true;
return false;
}
/* Remove spaces from Captcha Code */
function removeSpaces(string) {
return string.split(' ').join('');
}
</script>
</head>
<body onload="DisplayCodeForQR();">
<div style="border: 2px solid gray; width: 700px;">
<h2>Generating Captcha Demo - www.pakainfo.com</h2>
Enter the Captcha Text:
<input type="text" id="txtCompare" />
<input type="text" id="userCapt" style="text-align: center; border: none; font-weight: bold; font-size: 20px; font-family: Modern" />
<input type="button" id="btnrefresh" value="Refresh" onclick="DisplayCodeForQR();" />
<input id="btnValid" type="button" value="Check" onclick="alert(CheckValidCaptcha());" />
<br />
<br />
</div>
</body>
</html>
Ví dụ 2: index.html
<html>
<head>
<script type="text/javascript">
function DisplayCodeForQR()
{
var dynamicGenratedData = new Array('A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z');
var i;
for (i=0;i<4;i++){
var a = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
var b = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
var c = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
var d = dynamicGenratedData[Math.floor(Math.random() * dynamicGenratedData.length)];
}
var uniq_code = a + '' + b + '' + '' + c + '' + d;
document.getElementById("setUserCpt").value = uniq_code
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById('setUserCpt').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2){
document.getElementById('success').innerHTML = "Good Luck, HTML Form is validated Successfully";
//alert("Your Form is validated Successfully");
return true;
}
else{
document.getElementById('error').innerHTML = "Sorry, Please enter a valid captcha.";
//alert("Sorry, Please enter a valid captcha.");
return false;
}
}
function removeSpaces(string){
return string.split(' ').join('');
}
</script>
</head>
<body onload="DisplayCodeForQR();">
<center>
<h2>Please please fill the following fields to validate. - www.pakainfo.com</h2>
<table>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<input type="text" id="setUserCpt"readonly="readonly"/> //set background image according to your choice.
<input type="button" id="refresh" value="Refresh" onclick="DisplayCodeForQR();" />
</td>
</tr>
<tr>
<td>
<input type="text" id="txtInput"/>
</td>
</tr>
<tr>
<td>
<input id="Button1" type="button" value="Check" onclick="ValidCaptcha();"/>
</td>
</tr>
<tr>
<td><span id="error" style="color:red"></span></td>
</tr>
<tr>
<td><span id="success" style="color:green"></span></td>
</tr>
</table>
</center>
</body>
</html>
Hy vọng bạn đã có ý tưởng về Cách tạo một mã Captcha văn bản bằng JavaScript trong biểu mẫu HTML?.
- Bài đăng blog này được xuất bản ban đầu tại: https://www.pakainfo.com
Cảm ơn bạn!
