Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Teknik Pengesahan Input

Laksanakan pengesahan sisi klien untuk medan borang menggunakan pengesah, ungkapan nalar dan logik tersuai bagi memastikan integriti data.

Pelajaran 2 daripada 411 langkah

Teknik Pengesahan Input ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah Pengesahan Input?

Apabila pengguna memasukkan data ke dalam aplikasi anda, anda perlu memastikan data itu betul dan selamat. Proses ini dipanggil pengesahan input.

Proses ini penting untuk mengekalkan kualiti data dan mencegah ralat atau isu keselamatan, supaya aplikasi anda berfungsi seperti yang diharapkan.

Mengapa Mengesahkan Input Pengguna?

Pengesahan membantu dalam pelbagai cara untuk menghasilkan aplikasi yang kukuh dan mudah digunakan:

Integriti Data: Memastikan data mematuhi format yang dijangka (contohnya, alamat e-mel kelihatan seperti alamat e-mel).
Pengalaman Pengguna: Membimbing pengguna memasukkan maklumat yang betul, sekali gus mengurangkan kekecewaan.
Keselamatan: Menghalang input berniat jahat yang boleh mengeksploitasi aplikasi anda (contohnya, suntikan SQL).
Logik Perniagaan: Memastikan data memenuhi peraturan perniagaan tertentu (contohnya, syarat umur dan nama pengguna yang unik).

Validator TextFormField

Dalam Flutter, widget TextFormField mempunyai sifat khas yang dipanggil validator. Sifat ini menerima fungsi yang menyemak nilai input.

Jika input tidak sah, fungsi tersebut hendaklah mengembalikan mesej ralat (sebuah String). Jika input sah, fungsi itu hendaklah mengembalikan null.

Semakan Medan Kosong Asas

Mari lihat validator ringkas yang menyemak sama ada medan teks kosong. Jika kosong, mesej ralat akan muncul di bawah medan tersebut.

Cuba taip sesuatu, kemudian padamkannya dan hantar borang untuk melihat ralat itu.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Validation Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Basic Validation')),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: const InputDecoration(
                hintText: 'Enter your name',
                labelText: 'Name',
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Processing Data')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Memaparkan Ralat Pengesahan

Apabila fungsi validator mengembalikan String (mesej ralat), TextFormField akan memaparkan mesej itu secara automatik di bawah medan input dalam warna merah yang jelas.

Maklum balas visual serta-merta ini membantu pengguna memahami perkara yang tidak betul dan cara membetulkannya, sekali gus meningkatkan pengalaman pengguna secara keseluruhan.

Logik Tersuai: Semakan Kata Laluan

Anda boleh menulis sebarang logik tersuai dalam fungsi validator anda. Di sini, kita menyemak sama ada kata laluan mempunyai sekurang-kurangnya 6 aksara, iaitu amalan keselamatan yang biasa.

Ini menunjukkan cara melaksanakan peraturan yang lebih daripada sekadar semakan medan kosong.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Validation Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Custom Validation')),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              obscureText: true,
              decoration: const InputDecoration(
                hintText: 'Enter a password',
                labelText: 'Password',
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter a password';
                }
                if (value.length < 6) {
                  return 'Password must be at least 6 chars';
                }
                return null;
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Password is valid!')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Ungkapan Nalar (Regex)

Untuk corak pengesahan yang lebih kompleks, seperti menyemak format e-mel, nombor telefon atau jujukan abjad angka tertentu, Ungkapan Nalar (Regex) amat berkuasa.

Regex ialah jujukan aksara yang mentakrifkan corak carian. Kelas RegExp Dart membolehkan anda menggunakannya dengan mudah.

Pengesahan E-mel dengan Regex

Berikut ialah cara menggunakan ungkapan nalar ringkas untuk mengesahkan format alamat e-mel. Ungkapan ini menyemak corak asas: text@text.domain.

Ingat bahawa pengesahan e-mel yang menyeluruh boleh menjadi rumit, tetapi regex ini memberikan titik permulaan yang baik untuk format biasa.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Regex Validation Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Email Validation')),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  final RegExp emailRegex = RegExp(
      r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+"
  );

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              keyboardType: TextInputType.emailAddress,
              decoration: const InputDecoration(
                hintText: 'Enter your email',
                labelText: 'Email',
              ),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter an email';
                }
                if (!emailRegex.hasMatch(value)) {
                  return 'Please enter a valid email format';
                }
                return null;
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Email is valid!')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Mencetuskan Pengesahan Secara Manual

Pengesahan biasanya dicetuskan apabila pengguna cuba menghantar borang. Anda boleh melakukannya dengan memanggil _formKey.currentState!.validate() dalam pengendali onPressed bagi sesuatu butang.

Kaedah ini menjalankan semua validator dalam Form dan mengembalikan true jika semuanya sah, atau false jika sebaliknya. Anda juga boleh menggunakan autovalidateMode pada widget Form untuk mengesahkan input apabila input berubah, seperti yang ditunjukkan dalam contoh.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auto Validate Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('Auto-Validation')),
        body: const MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({super.key});

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

class _MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      // Auto-validate as user types
      autovalidateMode: AutovalidateMode.always,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              decoration: const InputDecoration(
                hintText: 'Enter text (min 3 chars)',
                labelText: 'Input',
              ),
              validator: (value) {
                if (value == null || value.length < 3) {
                  return 'Must be at least 3 characters';
                }
                return null;
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                // Manual validation still works
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Input is valid!')),
                  );
                }
              },
              child: const Text('Submit'),
            ),
          ),
        ],
      ),
    );
  }
}

Semakan Pengesahan

Antara cara berikut, yang manakah sah untuk melaksanakan pengesahan input dalam Flutter?

Jawab dalam pelajaran interaktif

Imbas Kembali: Pengesahan Input

Dalam pelajaran ini, anda mempelajari tentang pengesahan input pada sisi klien dalam Flutter.

Kita membincangkan sebab pengesahan penting untuk integriti data, pengalaman pengguna dan keselamatan.
Anda menggunakan sifat validator bagi TextFormField untuk mentakrifkan peraturan pengesahan.
Kita meneroka pelaksanaan logik tersuai dan penggunaan RegExp untuk corak yang kompleks.
Akhir sekali, anda melihat cara mencetuskan pengesahan menggunakan _formKey.currentState!.validate() dan autovalidateMode.

Syabas! Kini anda sudah bersedia untuk membina borang yang lebih kukuh dan mudah digunakan.

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Teknik Pengesahan Input” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Teknik Pengesahan Input”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Teknik Pengesahan Input”?

Laksanakan pengesahan sisi klien untuk medan borang menggunakan pengesah, ungkapan nalar dan logik tersuai bagi memastikan integriti data. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Teknik Pengesahan Input” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter