Flutter表单验证插件validation_assistant的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter表单验证插件validation_assistant的使用

描述

validation_assistant 是一个非常简单且轻量级的表单验证辅助工具,它允许您以极大的便利性使用自己的验证函数。以下是该包的主要特点:

  • 非常简单:易于集成和使用。
  • 非常轻量:不会给项目增加过多负担。
  • 零依赖:不依赖其他外部库。

开始使用

要开始使用 validation_assistant,首先需要将其添加到项目的 pubspec.yaml 文件中:

dependencies:
  validation_assistant: ^1.1.2

然后运行以下命令来获取包:

flutter pub get

使用方法

基本用法

下面是一个简单的例子,展示了如何使用 validation_assistant 进行基本的表单验证:

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final validationAssistant = ValidationAssistant();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ValidationAssistant Demo Page')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(50.0),
          child: TextFormField(
            autovalidateMode: AutovalidateMode.onUserInteraction,
            validator: validationAssistant
              ..required('This field is required')
              ..maxLength(10, 'Maximum length exceeded')
              ..regExp(r'^\d+$', 'Only digits are allowed'),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个 TextFormField,并使用 validation_assistant 对其进行了验证:

  • required('This field is required'):确保字段不为空,并显示自定义错误信息。
  • maxLength(10, 'Maximum length exceeded'):限制输入的最大长度为10个字符,并显示自定义错误信息。
  • regExp(r'^\d+$', 'Only digits are allowed'):确保输入只包含数字,并显示自定义错误信息。

自定义验证函数

除了内置的验证规则外,validation_assistant 还支持添加自定义验证函数。例如:

String? customValidationFunctionOne(String? value) {
  if (value != null && value.contains('@')) {
    return 'The "@" symbol is not allowed';
  }
  return null;
}

String? customValidationFunctionTwo(String? value) {
  if (value != null && value.contains('!')) {
    return 'The "!" symbol is not allowed';
  }
  return null;
}

// 在构建表单时添加这些自定义验证函数
validator: validationAssistant
  ..required('This field is required')
  ..add(customValidationFunctionOne)
  ..add(customValidationFunctionTwo),

在这个例子中,我们定义了两个自定义验证函数 customValidationFunctionOnecustomValidationFunctionTwo,并在 TextFormField 的验证器中添加了它们。

总结

validation_assistant 提供了一种简洁而强大的方式来处理Flutter应用中的表单验证。通过结合内置的验证规则和自定义验证函数,您可以轻松地实现复杂且灵活的表单验证逻辑。希望这个指南能帮助您更好地理解和使用 validation_assistant 插件。


更多关于Flutter表单验证插件validation_assistant的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单验证插件validation_assistant的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用Flutter表单验证插件validation_assistant的代码案例。这个插件可以帮助你简化表单验证的过程。假设我们要创建一个包含用户名和密码的简单登录表单,并添加一些基本的验证规则。

首先,确保你已经在pubspec.yaml文件中添加了validation_assistant依赖:

dependencies:
  flutter:
    sdk: flutter
  validation_assistant: ^latest_version  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来是完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Form Validation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFormPage(),
    );
  }
}

class MyFormPage extends StatefulWidget {
  @override
  _MyFormPageState createState() => _MyFormPageState();
}

class _MyFormPageState extends State<MyFormPage> {
  final formKey = GlobalKey<FormState>();
  String username = '';
  String password = '';
  FormValidationController formValidationController = FormValidationController();

  @override
  void initState() {
    super.initState();
    // 添加验证规则
    formValidationController.addValidators([
      FieldValidator(
        'username',
        [
          RequiredValidator(errorMessage: 'Username is required'),
          MinLengthValidator(5, errorMessage: 'Username must be at least 5 characters long'),
        ],
      ),
      FieldValidator(
        'password',
        [
          RequiredValidator(errorMessage: 'Password is required'),
          MinLengthValidator(8, errorMessage: 'Password must be at least 8 characters long'),
        ],
      ),
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Validation Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Username'),
                validator: (value) {
                  return formValidationController.validateField('username', value);
                },
                onChanged: (value) {
                  setState(() {
                    username = value;
                  });
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  return formValidationController.validateField('password', value);
                },
                onChanged: (value) {
                  setState(() {
                    password = value;
                  });
                },
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  if (formKey.currentState!.validate()) {
                    // 如果所有字段都通过验证,执行提交操作
                    print('Form submitted: Username = $username, Password = $password');
                  } else {
                    // 如果有字段未通过验证,执行验证逻辑
                    formValidationController.validateAllFields(formKey.currentState!);
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    formValidationController.dispose();
    super.dispose();
  }
}

代码说明:

  1. 依赖引入:在pubspec.yaml文件中添加validation_assistant依赖。
  2. 表单状态管理:使用GlobalKey<FormState>来管理表单状态。
  3. 验证控制器:创建FormValidationController实例,并添加验证规则。
  4. 验证规则:为usernamepassword字段分别添加了RequiredValidatorMinLengthValidator
  5. TextFormField:在TextFormFieldvalidator属性中使用formValidationController.validateField来执行验证。
  6. 表单提交:在按钮的onPressed回调中,先调用formKey.currentState!.validate()来验证所有字段,如果通过验证则执行提交操作,否则调用formValidationController.validateAllFields来显示所有错误信息。

这个示例展示了如何使用validation_assistant插件来简化Flutter中的表单验证过程。你可以根据需要添加更多的验证规则和字段。

回到顶部