• February 7, 2024

    ฟอร์มเดิม มี 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 เรื่อยๆ จะถูกห้าม 


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories