Cấp bậc tác giả:

HTML

Tạo Captcha sử dụng JQuery

Được viết bởi webmaster ngày 18/06/2016 lúc 08:54 PM
Captcha giúp tiết kiệm rác bằng cách xuất chuỗi ngẫu nhiên tạo ra các chữ cái hoặc số mà bạn phải gõ vào hộp văn bản để kiểm tra và nhận dạng.
  • 0
  • 1309

Tạo Captcha sử dụng JQuery

loading...

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

output-captcha.png

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML