Flutter表单验证插件custom_form_validation的使用

Flutter表单验证插件custom_form_validation的使用

custom_form_validation 是一个用于 Flutter 项目的可自定义验证类。它提供了灵活的表单验证功能，简化了在 Flutter 应用程序中创建和定制验证的过程。

平台支持

安装

要将 custom_form_validation 添加到您的 Flutter 项目中，请按照以下步骤操作：

1. 在项目的 pubspec.yaml 文件中添加依赖项并运行 flutter pub get：

   dependencies:
     custom_form_validation: ^0.0.4
   

2. 在 Dart 文件中导入包：

   import 'package:custom_form_validation/custom_validation.dart';
   

使用

通过使用 CustomTextFormField 和 Validations 类，您可以轻松创建带有验证功能的文本输入框。以下是一个示例代码：

import 'package:custom_form_validation/custom_validation.dart';

TextFormField(
  validator: (value) => Validator.validateMobile(value),
),
TextFormField(
  validator: (value) => Validator.validateName(value),
),
TextFormField(
  validator: (value) => Validator.validateAddress(value),
),

更多示例可以查看 example 文件夹。

自定义选项

custom_form_validation 提供了许多自定义选项，例如添加本地验证规则等，以满足应用程序的需求。

示例代码

以下是完整的示例代码，展示了如何使用 custom_form_validation 插件来实现表单验证：

import 'package:custom_form_validation/custom_form_validation.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const MyForm(),
    );
  }
}

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

  [@override](/user/override)
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Form(
        key: _formKey,
        child: SizedBox(
          width: MediaQuery.of(context).size.width * 0.70,
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Mobile Number"),
                  keyboardType: TextInputType.number,
                  validator: (value) => Validator.validateMobile(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Address"),
                  validator: (value) => Validator.validateAddress(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Pan Number"),
                  validator: (value) => Validator.validatePan(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Adhar Number"),
                  validator: (value) => Validator.validateAadhar(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Email"),
                  validator: (value) => Validator.validateEmail(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Credit Card"),
                  validator: (value) => Validator.validateCreditCard(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Url"),
                  validator: (value) => Validator.validateURL(value),
                ),
                const SizedBox(height: 40),
                TextFormField(
                  decoration: const InputDecoration(labelText: "Enter Password"),
                  validator: (value) => Validator.validatePassword(value),
                ),
                const SizedBox(height: 40),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Validate")),
                      );
                    } else {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Error")),
                      );
                    }
                  },
                  child: const Text("Validation"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}