วิธี Validate Date Pattern ใน JavaScript

การตรวจสอบรูปแบบวันที่ (Date Validation) ใน JavaScript สามารถทำได้โดยการ Parse String เป็น Date Object แล้วตรวจสอบว่าค่าที่ Parse ได้ตรงกับ Input เดิมหรือไม่

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
<body>
  <script>
    function validDate(date) {
      var split = date.split('/');
      // สร้าง Date Object: new Date(year, monthIndex, day)
      // split[2]=year, split[0]=month, split[1]=day
      var dateObj = new Date(split[2], split[0] - 1, split[1]);
      
      // ตรวจสอบ: Date Valid และ Component ตรงกับ Input
      return (dateObj &&
        (dateObj.getMonth() + 1) == split[0] &&
        dateObj.getDate() == Number(split[1]) &&
        dateObj.getFullYear() == Number(split[2]));
    }
    
    document.write("Valid date: 11/11/2017 = " + validDate('11/11/2017'));
    document.write("<br>Valid date: 18/18/2017 = " + validDate('18/18/2017'));
    document.write("<br>Valid date: 05/09/2017 = " + validDate('05/09/2017'));
  </script>
</body>
</html>

ผลลัพธ์

Valid date: 11/11/2017 = true
Valid date: 18/18/2017 = false
Valid date: 05/09/2017 = true

หลักการทำงาน

1. Split String ด้วย '/' → [month, day, year]
2. สร้าง new Date(year, month-1, day) (Month Index 0-11)
3. JavaScript Date จะ Auto-correct ค่าที่เกิน (เช่น Month 18 → Year+1, Month 6)
4. ตรวจสอบว่า Component ที่ได้จาก Date Object ตรงกับ Input เดิมทุกตัว
5. ถ้าตรงทั้งหมด = Valid Date

รูปแบบวันที่อื่นๆ ที่นิยม

// ISO 8601 (YYYY-MM-DD) - แนะนำ
function validISODate(str) {
  const date = new Date(str);
  return !isNaN(date.getTime()) && date.toISOString().startsWith(str);
}

// DD/MM/YYYY (Thai Format)
function validThaiDate(str) {
  const [d, m, y] = str.split('/').map(Number);
  const date = new Date(y, m - 1, d);
  return date.getDate() === d && date.getMonth() === m - 1 && date.getFullYear() === y;
}

// Regex Validation (Format Only - ไม่เช็ควันที่จริง)
const dateRegex = /^\d{4}-\d{2}-\d{2}$/; // YYYY-MM-DD
const thaiDateRegex = /^\d{2}\/\d{2}\/\d{4}$/; // DD/MM/YYYY

Best Practices

• ใช้ ISO 8601 (YYYY-MM-DD) เป็นมาตรฐานรับส่งข้อมูล
• ใช้ Library: date-fns, dayjs, moment.js (Legacy) สำหรับ Validation ซับซ้อน
• Client-side Validation = UX, Server-side Validation = Security (ต้อง Validate ที่ Server ด้วย)
• HTML5 Input: <input type="date"> Browser จัดการ Validation ให้ (แต่ Format ขึ้นกับ Locale)

Edge Cases ที่ต้องระวัง

• Leap Year: 29/02/2020 ✓, 29/02/2019 ✗
• Month/Day = 0 หรือติดลบ
• Year น้อยกว่า 100 (JavaScript อาจตีความผิด)
• Timezone: new Date('2023-01-01') อาจเป็น UTC หรือ Local ขึ้นกับ Format