0Pricing
Flutter Mobile Development · درس

تقنيات التحقق من صحة الإدخال

نفّذ التحقق من صحة حقول النماذج من جانب العميل باستخدام أدوات التحقق والتعبيرات النمطية والمنطق المخصّص لضمان سلامة البيانات

تقنيات التحقق من صحة الإدخال درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

What is Input Validation?

When users enter data into your app, you need to make sure it's correct and safe. This process is called input validation.

It's crucial for maintaining data quality and preventing errors or security issues, ensuring your application works as expected.

Why Validate User Input?

Validation helps in many ways to create robust and user-friendly applications:

  • Data Integrity: Ensures data fits expected formats (e.g., email looks like an email).
  • User Experience: Guides users to enter correct information, reducing frustration.
  • Security: Prevents malicious input that could exploit your app (e.g., SQL injection).
  • Business Logic: Ensures data meets specific business rules (e.g., age requirements, unique usernames).

The TextFormField Validator

In Flutter, the TextFormField widget has a special property called validator. This property takes a function that checks the input value.

If the input is invalid, the function should return an error message (a String). If it's valid, it should return null.

Basic Empty Field Check

Let's see a simple validator that checks if a text field is empty. If it is, an error message appears below the field.

Try typing something, then deleting it and submitting to see the error.

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'),
            ),
          ),
        ],
      ),
    );
  }
}

Displaying Validation Errors

When a validator function returns a String (an error message), the TextFormField automatically displays this message below the input field in a distinct red color.

This immediate visual feedback helps users understand what went wrong and how to fix it, improving the overall user experience.

Custom Logic: Password Check

You can write any custom logic inside your validator function. Here, we check if a password is at least 6 characters long, which is a common security practice.

This demonstrates how to implement rules beyond simple empty checks.

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'),
            ),
          ),
        ],
      ),
    );
  }
}

Regular Expressions (Regex)

For more complex validation patterns, like checking email formats, phone numbers, or specific alphanumeric sequences, Regular Expressions (Regex) are incredibly powerful.

A regex is a sequence of characters that defines a search pattern. Dart's RegExp class lets you use them easily.

Email Validation with Regex

Here's how to use a simple regular expression to validate an email address format. It checks for a basic pattern: text@text.domain.

Remember, comprehensive email validation can be complex, but this regex provides a good starting point for common formats.

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'),
            ),
          ),
        ],
      ),
    );
  }
}

Triggering Validation Manually

Validation is typically triggered when the user tries to submit the form. You do this by calling _formKey.currentState!.validate() inside an onPressed handler for a button.

This method runs all validators in the Form and returns true if all are valid, false otherwise. You can also use autovalidateMode on the Form widget to validate inputs as they change, as shown in the example.

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'),
            ),
          ),
        ],
      ),
    );
  }
}

Validation Check

Which of the following are valid ways to implement input validation in Flutter?

Recap: Input Validation

In this lesson, you learned about client-side input validation in Flutter.

  • We covered why validation is essential for data integrity, user experience, and security.
  • You used the validator property of TextFormField to define validation rules.
  • We explored implementing custom logic and using RegExp for complex patterns.
  • Finally, you saw how to trigger validation using _formKey.currentState!.validate() and autovalidateMode.

Well done! You're now equipped to build more robust and user-friendly forms.

الأسئلة الشائعة

هل درس «تقنيات التحقق من صحة الإدخال» مجاني؟

نعم — نص درس «تقنيات التحقق من صحة الإدخال» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «تقنيات التحقق من صحة الإدخال»؟

نفّذ التحقق من صحة حقول النماذج من جانب العميل باستخدام أدوات التحقق والتعبيرات النمطية والمنطق المخصّص لضمان سلامة البيانات تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «تقنيات التحقق من صحة الإدخال»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. عنصر Form ووحدات التحكم
  2. تقنيات التحقق من صحة الإدخال
  3. حقول النماذج المخصّصة
  4. التركيز ولوحة المفاتيح وتجربة إدخال البيانات
← العودة إلى Flutter Mobile Development