Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

บทที่ 8: การจัดการฟอร์มขั้นสูงและ Form Validation

🔖 หมวดบทเรียน: การใช้งานฟอร์มแบบมืออาชีพในแอป Flutter

📌 เหมาะสำหรับ: แอปที่มีการกรอกข้อมูล เช่น สมัครสมาชิก ล็อกอิน หรือแบบฟอร์มทั่วไป

🎯 เป้าหมาย: เข้าใจการสร้างฟอร์มที่สามารถตรวจสอบความถูกต้องของข้อมูลได้แบบอัตโนมัติ

🧭 เกริ่นนำ

Form หรือแบบฟอร์มเป็นส่วนสำคัญของแอป Flutter โดยเฉพาะเมื่อผู้ใช้ต้องกรอกข้อมูล เช่น อีเมล รหัสผ่าน ชื่อ ฯลฯ Flutter มี Form widget และ TextFormField ที่สามารถรวมเข้ากับระบบ validation ได้อย่างมีประสิทธิภาพ ในบทนี้เราจะเรียนรู้วิธีสร้างฟอร์มแบบครบวงจร พร้อมตัวอย่างโค้ดจริง

🧱 โครงสร้างฟอร์มพื้นฐาน

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'กรุณากรอกข้อมูล';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // ข้อมูลถูกต้อง
          }
        },
        child: Text('ส่งข้อมูล'),
      ),
    ],
  ),
)

✅ เทคนิคการ validate

  • ตรวจความยาว: value.length < 6
  • ตรวจอีเมล: RegExp(r'^[^@]+@[^@]+\.[^@]+\$').hasMatch(value)
  • ตรวจว่ากรอกข้อมูลครบทุกช่องก่อน submit

🎯 ตัวอย่างแบบฟอร์มลงทะเบียน

TextFormField(
  decoration: InputDecoration(labelText: 'อีเมล'),
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value == null || !value.contains('@')) {
      return 'กรุณากรอกอีเมลที่ถูกต้อง';
    }
    return null;
  },
)

TextFormField(
  decoration: InputDecoration(labelText: 'รหัสผ่าน'),
  obscureText: true,
  validator: (value) {
    if (value == null || value.length &lt; 6) {
      return 'รหัสผ่านต้องมีอย่างน้อย 6 ตัวอักษร';
    }
    return null;
  },
)

✅ สรุป

  • ใช้ Form และ TextFormField สำหรับจัดการข้อมูลจากผู้ใช้
  • ใช้ validator เพื่อระบุเงื่อนไขการตรวจสอบค่าที่กรอก
  • ตรวจสอบด้วย .validate() ก่อน submit

ในบทถัดไปเราจะไปเรียนรู้การเขียน Unit Test เพื่อทดสอบ logic ของแอปอย่างมีประสิทธิภาพ