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

Nguyên tắc hoạt động, Đoạn mã JavaScript này sẽ giúp bạn tạo ra hai số và thực hiện phép toán cộng. Sau đó, bạn phải điền kết quả vào khung theo yêu cầu. Khi gửi, hành động sẽ được thực hiện nếu kết quả đúng, nếu không thì sẽ được thông báo lỗi.

Form mẫu gồm HTML và js

HTML

<form id="form2sheet" action="/form.php" method="POST" >

<input type="text" name="Name" placeholder="Name" autocomplete="false" value="" class="ch3ch-b0t">

<input type="text" name="Email" placeholder="Email" autocomplete="false" value="" class="ch3ch-b0t">

<input type="text" name="Phone" placeholder="Phone" autocomplete="false" value="" class="ch3ch-b0t">

<input type="text" name="Field" placeholder="Text" value="">

<input type="text" name="Field1" placeholder="Your name here" required value="">

<input type="tel" name="Field2" placeholder="Phone number" required value="" maxlength="15" >

<input type="email" name="Field3" placeholder="Your email here" required value="" maxlength="50">

<textarea name="Field4" placeholder="TextArea text"></textarea>

<p>Kết quả phép toán: (vd: Hai + 3 = 5)</p>

<input type="number" name="captcha" placeholder="" required value="">

<button type="Submit">SEND</button>

</form>

Javascript

<script>

//-- captcha ---

var chuArray = ["Một", "Hai", "Ba", "Bốn", "Năm", "Sáu", "Bảy", "Tám", "Chín", "Mười"];

var soArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var myArray = [].concat(chuArray, soArray);

var my2Array = [].concat(soArray, soArray);

var rand1 = "Một";

var rand2 = "2";

var num1 = 0;

var num2 = 0;

var tong = 0;

function captcha() {

rand1 = myArray[(Math.random() * myArray.length) | 0];

rand2 = myArray[(Math.random() * myArray.length) | 0];

num1 = my2Array[myArray.indexOf(rand1)];

num2 = my2Array[myArray.indexOf(rand2)];

tong = num1 + num2;

document.querySelector("#form2sheet input[name='captcha']").placeholder = rand1 + " + " + rand2 + " = ?";

}

//-----end code captcha-----

window.addEventListener("load", function() {

captcha();

const form = document.getElementById('form2sheet');

form.addEventListener("submit", function(e) {

e.preventDefault();

if (document.querySelector("#form2sheet input[name='captcha']").value == tong) {

const data = new FormData(form);

const action = e.target.action;

fetch(action, {

method: 'POST',

body: data,

})

.then(() => {

captcha();

form.reset();

alert("Submit Success!");

});

} else {

captcha();

form.reset();

alert("Không thành công!\nNhập sai CAPTCHA");

}

});

});

</script>

Giải thích y nghĩa:

Đầu tiên, chúng tôi sẽ tạo hai biến, được gọi là n1 và n2. Giá trị cho hai biến này là số bất kỳ được tự động tạo ra từ 1 đến 10.Thay mười bằng một trăm hoặc một nghìn để tăng số có hai hoặc ba chữ số cho dãy gia trị của bạn. Mình sẻ tăng mức độ phức tạp của phép toán bằng cách gán sô "1" thành "một", "2" thành "hai",... Như vậy phép toán nhận được sẽ có dạng "3 + năm = ?". Tạo trường input có tên captcha, hai biến này được chia thành hai số hạng trong phép tính tổng. trường input có tên captcha được đặt trong form. Khi bạn bấm nút "submit" để thực hiện lệnh thực thi, nó sẽ thực hiện phép toán trong thẻ có id "captcha" và so sánh giá trị bạn nhập vào trong thẻ có id là "tong". Nếu hai kết quả giống nhau, bước tiếp theo sẽ được thực hiện. Nếu có sự khác biệt, thông báo lỗi sẽ hiện lên và rết lại form.

Để tăng cường mức độ bảo mật mình sẻ tạo thêm 3 trường và ẩn bằng css. Chú ý nên ẩn bằng css thay vì sử dụng trường ăn (input type='hidden'). Bot hoạt động trên CODE HTML nên chúng có xu hướng điền tất cả các trường trống trên form. Chúng ta sẻ lợi dụng điều này để hạn chế bot. Đây gọi là kỹ thuật "Honeypot" để chặn spam form.

*Lưu ý đât chỉ là một code mang tính học tập và hạn chế bot spam. Chứ không chặn hoàn toàn thư rác, tuy nhiên nó chạy js thuần rất nhanh, Trên đây là hướng dẫn của mình. chúc các bạn thành công

Mình cũng có một bài viết hướng dẫn tạo form HTML không cần server, xử lý dử liệu bằng Google Sheet tại đây. Bạn có thể tham khảo demo