Cách tạo mã captcha

Cuối cùng là xử lý hành động “Submit” của người dùng, chúng ta sẽ đem giá trị mà người dùng nhập vào so sánh với giá trị tổng mà chúng ta đã ẩn phía trên.

name=3 name=4name=5name=6name=7name=8

name=9 name=4name=5name=6"correctsum"3name=8

"correctsum"5"correctsum"6name=3 "correctsum"8name=9value=0

Rồi đó, xong! Khá đơn giản phải không. Nếu có thắc mắc gì thì bạn có thể để lại comment phía dưới mà chúng tôi sẽ trả lời trong thời gian ngắn nhất. 

Không biết liệu bạn có hứng thú với Tiện ích kiểm tra urls rút gọn hay không. Đây là thứ giúp đỡ bạn khá nhiều trong việc duyệt web một cách an toàn trước hiểm họa từ những liên kết rút gọn.

Mã captcha giúp cho người quản trị loại ngăn chặn phần mềm tự động thực hiện những tác vụ có thể làm giảm đi chất lượng dịch vụ của một hệ thống. Trên các trang web captcha thường được đi kèm với các form đăng ký hay form liên hệ nhằm giảm bớt các đăng ký ảo hoặc liên hệ spam. Nếu có kiến thức về PHP, ASP… bạn có thể dễ dàng tạo ra captcha với nhiều phương thức khác nhau. Bài viết này xin hướng dẫn bạn cách tạo một mã captcha đơn giản với Javascript.

Đoạn mã Javascript này sẽ giúp bạn sinh ra 2 số và thực hiện phép toán cộng và bạn phải thực hiện phép toán cộng này rồi điền kết quả vào khung theo yêu cầu và khi submit thì nếu kết quả đúng thì hành động sẽ được thực hiện còn nếu không thì sẽ thông báo lỗi.

Và đây là đoạn mã cụ thể:

Javascript Captcha Code

1

2

3

4

5

6

7

8

9

10

11

12

$[document].ready[function[] {

  var n1 = Math.round[Math.random[] * 10 + 1];

  var n2 = Math.round[Math.random[] * 10 + 1];

  $["#cau_hoi"].val[n1 + " + " + n2];

  $[".ten_form"].submit[function [e] {

if [eval[$["#cau_hoi"].val[]] != $["#tra_loi"].val[]] {

      $["#tra_loi"].css['box-shadow', '0px 0px 7px red'];

      alert['Ban nhap ket qua sai. Xin vui long nhap lai.'];

      e.preventDefault[];

    }

  }];

}];

Giải thích ý nghĩa:

Đầu tiên ta sẽ tạo 2 biến tên là n1 và n2. 2 biến này nhận giá trị là số bất kỳ được phát sinh tự động từ 1 đến 10. Nếu bạn muốn dãy gia trị chạy nhiều hơn thì thay 10 bằng 100 hay 1000 để tăng lên số có 2 hoặc 3 chữ số. 2 biến này được đặt thành 2 số hạng trong phép tính tổng tại thẻ có id là cau_hoi. Thẻ có id là cau_hoi cùng với thẻ id tra_loi được đặt chung trong form có tên là ten_form. Khi bấm nút thực hiện lệnh thực thi [submit] nó sẽ thự hiện phép toán trong thẻ có id cau_hoi và so sánh giá trị đó với giá trị bạn nhập vào trong thẻ có id là tra_loi. Nếu 2 kết quả này giống nhau thì thao tác tiếp theo sẽ được thực hiện. Nếu khác nhau sẽ có thông báo lỗi hiện lên và thẻ có id là tra_loi sẽ được viền khung đỏ đánh dấu để bạn nhập lại nội dung.

Bạn có thể xem trang web demo tại: //mangbinhdinh.vn/demo/?page=javascript-basic-captcha

Bạn có thể download mã nguồn tại:

Box.net: //tinyurl.com/l5qbrx2
Mediafire: //tinyurl.com/m8y23qu

Lưu ý để đoạn mã này chạy bạn cần sử dụng thư viện JQuery. Ở đây mình dùng phiên bản jQuery v1.10.2. Bạn có thể xem và tải hoặc chèn từ địa chỉ: //ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js.

Mở rộng ra bạn có thể tạo mã captcha là một số có n chữ số sinh ngẫu nhiên [lúc tạo biến n1] và thay vì tạo thêm một biến nữa để thực hiện phép toán thì ta có thể yêu cầu nhập lại số vừa sinh ra vào khung trả lời và đối chiếu.

Huỳnh Mai Anh Kiệt

- Advertisement -

Javascript - HTML

Hướng dẫn tích hợp cửa sổ Zalo chat vào trang web

Huỳnh Mai Anh Kiệt - 07/06/2021

Zalo là mạng xã hội mà nhiều người Việt đang sử dụng trên mobile. Và xu hướng người dùng sử dụng mobile để lướt...

Xem thêm

Javascript - HTML

Dùng hàm alert[] cho một mảng trong JavaScript

Huỳnh Mai Anh Kiệt - 25/05/2021

Thường khi code mình hay debug trong JavaScript bằng hàm alert[] hoặc console.log[]. Trong đó console.log[] được dùng nhiều hơn cả vì nói chung...

Xem thêm

Javascript - HTML

Hướng dẫn tạo bộ đếm lùi thời gian bằng JavaScript

Huỳnh Mai Anh Kiệt - 13/05/2021

Mới đó mà đã gần nửa năm 2021 trôi qua. Tình hình dịch bệnh COVID-19 cũng chẳng mấy khả quan. Nhưng vẫn cứ hy...