Trang chủ Lập trình Javascript - HTML Hướng dẫn tạo captcha đơn giản với JavaScript

Hướng dẫn tạo captcha đơn giản với JavaScript

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ể:

 

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: http://mangbinhdinh.vn/demo/javascriptcaptcha/

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

Box.net: http://tinyurl.com/l5qbrx2
Mediafire: http://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ỉ: http://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

Bài trướcTặng quà 8/3
Bài tiếp theoChia tay
Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên tại Quy Nhơn.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

- Advertisment -
Shopify

BÀI VIẾT MỚI

Amazon ra mắt Amazon Honeycode – Công cụ hỗ trợ người dùng tạo ứng dụng di động và web

Mới đây Amazon vừa thông báo ra mắt dịch Amazon Honeycode. Đây là một dịch vụ hỗ trợ người dùng tạo ra các ứng...

Điều gì sẽ xảy ra với cơ thể khi bạn trúng đạn

Chúng ta chắc hẳn đã xem khá nhiều bộ phim hành động mà trong đó nhân vật chính bị trúng đạn vào vai, vào...

Dad, How Do I? – Kênh Youtube cho những ai không có bố

Vừa qua, một kênh YouTube mới của một người đàn ông dạy bài học, kỹ năng về cuộc sống đã lan truyền cực kỳ...

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

reCAPTCHA rất hữu ích trong số hoá dữ liệu

Sách được xem là những kho tàng tri thức của nhân loại, tuy nhiên việc lưu trữ sách là cả một vấn đề to...

BẠN XEM CHƯA

Replace Broken Images – Tự động thay thế hình ảnh lỗi trên WordPress

Đôi khi hosting lưu trữ không đủ nên đa phần các bạn sử dụng WordPress thường hay sử dụng một hosting dịch vụ trung...

Kiểm soát thời gian sử dụng máy tính với Aware

Ai cũng biết sử dụng máy tính lâu sẽ có hại đến sức khoẻ như thế nào. Nhưng đôi khi chúng ta miệt mài...

Neymar đắng lòng khi Brazil thua Đức

[youtube https://www.youtube.com/watch?v=4WsaS7_F_as?rel=0&w=560&h=315] Nguồn: Youtube

USBLogView – Theo dõi các kết nối qua cổng USB

Bạn muốn theo dõi các kết nối qua cổng USB và giải pháp cho bạn là sử dụng tiện ích mang tên USBLogView. USBLogView là...

Cách bỏ qua màn hình đăng nhập Windows 10

Khi nâng cấp lên Windows 10 có thể vài trường hợp xảy ra tình trạng khi khởi động Windows sẽ không vào thẳng màn...