Tại sao chúng ta sử dụng CAPTCHA?
Đây là một cổng đơn giản để đảm bảo dữ liệu được an toàn. Ngày nay, bạn có thể thấy sử dụng CAPTCHA trong nhiều trang web như Google, trang web ngân hàng, và cổng thanh toán... để giúp ngăn ngừa truy cập trái phép và cung cấp quyền truy cập vào thông tin nhạy cảm như thẻ tín dụng hoặc tài khoản ngân hàng.
Lợi ích:
- Ngăn chặn truy cập trái phép
- Xác nhận an toàn và bảo mật thông tin nhạy cảm
- Giảm rác và virus
- Tăng cường an ninh,...
Đoạn code đơn giản sau:
<!DOCTYPE html>
<html>
<head>
<title>Sample Captcha</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnGetCaptcha").prop("disabled", true);
Var iNumber = Math.floor(Math.random() * 10000);
$("#divGenerateRandomValues").css({ "background-image": 'url(../img/captcha.png)', 'width': '100px', 'height': '50px' });
$("#divGenerateRandomValues").html("<input id='txtNewInput'></input>");
$("#txtNewInput").css({ 'background': 'transparent', 'font-family': 'Arial', 'font-style': 'bold', 'font-size': '40px' });
$("#txtNewInput").css({ 'width': '100px', 'border': 'none', 'color': 'black' });
$("#txtNewInput").val(iNumber);
$("#txtNewInput").prop('disabled', true);
$("#btnGetCaptcha").click(function () {
if ($("#textInput").val() != iNumber) {
alert("Wrong Input!");
}
else {
alert("Correct Input!!!");
}
});
Var wrongInput = function () {
if ($("#textInput").val() != iNumber) {
returntrue;
}
else {
returnfalse;
}
};
$("#textInput").bind('input', function () {
$("#btnGetCaptcha").prop('disabled', wrongInput);
});
});
</script>
</head>
<body>
<div id="divGenerateRandomValues"></div>
<input type="text" id="textInput"/>
<button id="btnGetCaptcha">Submit</button>
</body>
</html>
Output
Khi tải trang, nếu chúng ta nhập đúng đầu vào thì đầu ra như dưới đây