Hướng Dẫn Tạo Xác Thực Captcha Với HTML và Javascript

Xin chào các bạn!

Hôm nay mình được cô giáo giao bài tập về nhà,

Đầu tiên mình sẽ tìm hiểu xem Captcha là gì nhé:

Captcha Là Gì?

Captcha là một hình ảnh với một mã được viết trên đó. Khách truy cập trang web được yêu cầu đọc mã trên hình ảnh và nhập giá trị vào trường văn bản. Nếu từ đã nhập sai, việc gửi biểu mẫu không được xử lý và sẽ hiển thị thông báo lỗi. Vì CAPTCHA là một hình ảnh mờ thông minh, bot spam có thể đọc nó. Vì vậy, mẫu không thể được tự động gửi.

Đây là mã HTML :

<html>
<head>
<title>Hướng Dẫn Tạo Xác Thực Captcha Với HTML và Javascript</title>
</head>
<body onload="taoCaptcha();">
<center>
<h1>Hướng Dẫn Tạo Xác Thực Captcha Với HTML và Javascript</h1>
<table>

<tr>

<td>
<input type="text" id="mainCaptcha" readonly="readonly"/>

</td>
</tr>
<tr>

<td>
<input type="text" id="txtInput"/> 
</td>
</tr>
<tr>

<td>
<input type="button" id="refresh" value="Tạo mới Captcha" onclick="taoCaptcha();" />
<input id="Button1" type="button" value="Check" onclick="checkCaptcha();"/>
</td>
</tr>
<tr>
<td><span class="thongbao-captcha" style="color:red"></span></td>
</tr>

</table>
</center>
</body>
</html>

Đây là mã code JavaScript:

 function taoCaptcha()
         {
             var alpha = new Array('A','B','C','D','E');
             var i;
             for (i=0;i<2;i++){
               var a = alpha[Math.floor(Math.random() * alpha.length)];
               var b = Math.floor(Math.random() * 100) + 1;
              }
            var code = a + '' + b;
            document.getElementById("mainCaptcha").value = code
          }
          function checkCaptcha(){
              var string1 = remove(document.getElementById('mainCaptcha').value);
              var string2 = remove(document.getElementById('txtInput').value);
              if (string1 == string2){
         document.getElementsByClassName('thongbao-captcha')[0].innerHTML = "Chúc mừng bạn";
                return true;
              }
              else {       
         document.getElementsByClassName('thongbao-captcha')[0].innerHTML = "Nhập lại"; 
                return false;
          
              }
          }
          function remove(string){
            return string.split(' ').join('');
          }

Sau đây là mình sẽ giải thích cho các bạn:

1
Để lại bình luận của bạn

avatar
newest oldest most voted
phước
Guest
phước

Thanks bạn