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:

3.4 5 votes
Article Rating
guest
1 Comment
oldest
newest most voted
Inline Feedbacks
View all comments
phước
phước
1 year ago

Thanks bạn

1
0
Would love your thoughts, please comment.x
()
x