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: https://mangbinhdinh.vn/demo/?page=javascript-basic-captcha

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

- Advertisement -
Bài trướcTặng quà 8/3
Bài tiếp theoChia tay
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
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 cho Hura Apps - một startup nhỏ về công nghệ 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

BÀI VIẾT MỚI

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

Giới thiệu một số công nghệ, dịch vụ mà Hura Apps đang dùng cho mô hình SaaS

Hura Apps là nhóm phát triển các ứng dụng web hỗ trợ cho nền tảng Shopify. Hura Apps hoạt động theo mô hình SaaS....

Hành trình kiếm 500 triệu/tháng từ việc xuất bản ứng dụng lên Shopify App Store

Đây là câu chuyện của một lập trình viên người Pháp có tên Axel Hardy được chính anh chia sẻ trên Twitter của mình....

BẠN XEM CHƯA

Sparrow cho Windows mang tên Mailbird

Sparrow là trình duyệt mail dành riêng của các thiết bị sử dụng MAC và iPhone. Giờ đây bạn có thể cảm nhận nó...

Chữa dứt bệnh đau dạ dày bằng hạt đậu rồng già

Nếu răng bạn còn khỏe, hãy lấy hạt đậu rồng già, rang với muối cho vàng thơm hong để cháy. Sáng sớm bụng đói, nhai...

Pokki – Start menu của ứng dụng web trên Windows

Start menu là trình đơn giúp bạn dễ dàng truy cập các chương trình đã được cài đặt vào máy cũng như các ứng...

Coder vs Programmer vs Developer vs Hacker vs Computer Scientist ?

Coder - Thợ code, khi được giao việc code một chương trình nào đó thường cần phải kèm theo một bản mô tả chi...

Thiếu nữ Bình Định xinh lung linh đón xuân

Bộ ảnh được thực hiện bởi nhiếp ảnh gia Minh Pham trong những ngày gần tết năm 2015. Ảnh: Flickr Wandow