ฟอร์มเดิม มี captcha ตัวเลข และ เช็คไอพี เก็บค่าใน session เพื่อเพิ่มระยะเวลาการรอในการส่งเรื่อยๆ แต่ก็ทะลุมาได้ด้วย เราจะเพิ่มการป้องกันด้วยการ จำกัดการส่ง จาก Device โดยใช้ Javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Form และ JavaScript จำกัดการกด</title>
<script>
var submitCount = 0;
function submitForm() {
submitCount++;
if (submitCount > 5) {
alert("คุณกด submit เกินจำนวนที่กำหนดแล้ว");
return false; // ไม่ส่ง form ไปยังเซิร์ฟเวอร์
}
return true; // ส่ง form ไปยังเซิร์ฟเวอร์
}
</script>
</head>
<body>
<h2>ฟอร์ม Submit</h2>
<form action="/submit" method="post" onsubmit="return submitForm()">
<label for="username">ชื่อผู้ใช้:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">รหัสผ่าน:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
โค้ดนี้ เมื่อมีการกด submit ฟอร์ม ฟังก์ชัน submitForm() จะถูกเรียก และจะเพิ่มค่า submitCount ขึ้นทุกครั้งที่มีการกด submit โดยหยิบค่า submitCount มาเพิ่ม 1 ในทุกครั้ง หากค่า submitCount เกิน 5 ก็จะแสดงข้อความแจ้งเตือนและไม่ส่งฟอร์มไปยังเซิร์ฟเวอร์ นอกจากนี้ คุณสามารถเรียกใช้ฟังก์ชันนี้โดยการเชื่อมต่อกับเหตุการณ์ onSubmit ของฟอร์ม HTML ของคุณ เพื่อให้การตรวจสอบนี้ทำงานได้.จะทำให้เข้าไปใช้งานส่งฟอร์มไม่ได้อีก จนกว่าจะมีการรีเซ็ตจากผู้ให้บริการ โดยใช้โค๊ดนี้
<script>
var submitCount = 0;
function submitForm() {
submitCount++;
if (submitCount > 5) {
alert("คุณกด submit เกินจำนวนที่กำหนดแล้ว");
submitCount = 0; // รีเซ็ตค่า submitCount เพื่อให้สามารถ submit ฟอร์มใหม่ได้
return false; // ไม่ส่ง form ไปยังเซิร์ฟเวอร์
}
return true; // ส่ง form ไปยังเซิร์ฟเวอร์
}
</script>
เมื่อการกด submit เกิน 5 ครั้งและได้รับการแจ้งเตือน ค่า submitCount จะถูกรีเซ็ตกลับไปที่ 0 เพื่อให้สามารถกด submit ฟอร์มใหม่ได้อีกครั้งหลังจากนั้นวิธีทำให้รีเซ็ตอัตโนมัติโดยกำหนดเวลาเช่น 1 ชั่วโมง
ใช้ setTimeout() ใน JavaScript เพื่อกำหนดเวลารีเซ็ตอัตโนมัติหลังจากเวลาที่กำหนดได้ ในกรณีนี้คือหลังจาก 1 ชั่วโมงเช่นกัน
var submitCount = 0;
function submitForm() {
submitCount++;
if (submitCount > 5) {
alert("คุณกด submit เกินจำนวนที่กำหนดแล้ว");
submitCount = 0; // รีเซ็ตค่า submitCount เพื่อให้สามารถกด submit ฟอร์มใหม่ได้
setTimeout(function() {
submitCount = 0; // รีเซ็ตค่า submitCount อัตโนมัติหลังจาก 1 ชั่วโมง
}, 3600000); // 1 ชั่วโมงมีค่าเท่ากับ 3600000 มิลลิวินาที
return false; // ไม่ส่ง form ไปยังเซิร์ฟเวอร์
}
return true; // ส่ง form ไปยังเซิร์ฟเวอร์
}การปิดการใช้งาน JavaScript บนเบราว์เซอร์อาจเป็นวิธีที่ผู้ใช้สามารถใช้ในการแก้ไขปัญหาได้ หากปิดการใช้งาน JavaScript โปรแกรม JavaScript ที่ทำให้ฟอร์มถูกห้าม submit หลังจากครบ 5 ครั้งก็จะไม่ทำงาน และผู้ใช้จะสามารถ submit ฟอร์มได้อย่างปกติโดยไม่มีข้อจำกัด
แก้โดยการใช้ฟอร์มที่ทำงานโดย javascript ดังนั้นถ้าผู้ใช้ปิดการทำงาน javascrpit ก็จะใช้งานฟอร์มไม่ได้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Form และ JavaScript</title>
<script>
function submitForm() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// ตรวจสอบเงื่อนไขก่อนการ submit
if (username === '' || password === '') {
alert('กรุณากรอกชื่อผู้ใช้และรหัสผ่าน');
return false; // ไม่ส่งฟอร์ม
}
// ส่งฟอร์มไปยังเซิร์ฟเวอร์
return true;
}
</script>
</head>
<body>
<h2>ฟอร์ม Submit</h2>
<form action="/submit" method="post" onsubmit="return submitForm()">
<label for="username">ชื่อผู้ใช้:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">รหัสผ่าน:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
ฟอร์มแบบอื่น
<script>
function submitForm() {
var username = document.getElementById('username').value;
// ตรวจสอบว่ามีการกรอก username หรือไม่
if (username === '') {
alert('กรุณากรอกชื่อผู้ใช้');
return false; // ไม่ส่งฟอร์ม
}
// ส่งฟอร์มไปยังเซิร์ฟเวอร์
return true;
}
</script>
<form action="/submit" method="post" onsubmit="return submitForm()">
<label for="username">ชื่อผู้ใช้:</label><br>
<input type="text" id="username" name="username"><br><br>
<input type="submit" value="Submit">
</form>
ใช้งาน
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Form ด้วย JavaScript</title>
<script>
var submitCount = 0;
var lastSubmitTime = null;
function submitForm() {
// ตรวจสอบว่ามีการกด submit มากกว่า 5 ครั้งหรือไม่
if (submitCount >= 5) {
var currentTime = new Date().getTime();
// ตรวจสอบว่าเวลาผ่านไปมากกว่า 1 ชั่วโมงหรือไม่
if (lastSubmitTime && (currentTime - lastSubmitTime < 3600000)) {
alert('คุณต้องรอเวลา 1 ชั่วโมงก่อนที่จะสามารถ submit ฟอร์มอีกครั้งได้');
return false; // ไม่ส่งฟอร์ม
} else {
// รีเซ็ตค่า submitCount เมื่อผ่านไปเวลา 1 ชั่วโมง
submitCount = 0;
}
}
var username = document.getElementById('username').value;
// ตรวจสอบว่ามีการกรอก username หรือไม่
if (username === '') {
alert('กรุณากรอกชื่อผู้ใช้');
return false; // ไม่ส่งฟอร์ม
}
// บันทึกเวลาของการ submit
lastSubmitTime = new Date().getTime();
// เพิ่มค่า submitCount
submitCount++;
// ส่งฟอร์มไปยังเซิร์ฟเวอร์
return true;
}
</script>
</head>
<body>
<h2>ฟอร์ม Submit ด้วย JavaScript</h2>
<form action="/submit" method="post" onsubmit="return submitForm()">
<label for="username">ชื่อผู้ใช้:</label><br>
<input type="text" id="username" name="username"><br><br>
<input type="submit" value="Submit">
</form>
ถ้าเข้า url ใหม่ เริ่มใหม่
ใช้สำหรับเมื่่อยังคงอยู่หน้าเดิม การกด submit เรื่อยๆ จะถูกห้าม