Flutter表单验证插件simple_form_validator的使用

简介

simple_form_validator 是一个用于简化 Flutter 表单字段验证的包。它仅依赖于 intl 包（主要用于年龄验证），并且具有以下特点：

• 开源
• 可扩展
• 测试覆盖率 100%

示例

TextFormField(
  validator: (value) {
    return Validator.validate(value, [
      Required("输入不能为空"),
      ValidDateFormat("dd/MM/yyyy", "日期格式不正确"),
      MaxAge(15, "dd/MM/yyyy", "你太老了"),
      MinLength(2, "最小长度不正确")
    ]);
  },
)

快速开始

安装

在你的 Flutter 项目中添加 simple_form_validator 作为依赖项，在 pubspec.yaml 文件中添加以下行：

dependencies:
  simple_form_validator: "0.1.4"

然后运行 flutter pub get 来安装所需的依赖。

导入

在 Dart 小部件中导入 simple_form_validator 包：

import 'package:simple_form_validator/simple_form_validator.dart';

现在你可以使用 Validator 类来创建验证逻辑。这里是一个简单的验证器，用于检查输入是否为空或无效：

final invalidInput = Validator.validate("", [
  Required("输入不能为空"),
]);

final validInput = Validator.validate("ma", [
  Required("输入不能为空"),
]);

print(invalidInput); // 输入不能为空

print(validInput); // null，表示输入有效

验证类型

ValidationType(String errorMessage)

这是一个所有验证类型都需要继承的通用类。如果输入值不满足验证条件，则返回错误消息 errorMessage。

MaxAge(int maxYears, String dateFormat, String errorMessage)

验证给定日期是否比 maxYears 年轻。如果输入日期格式不正确，也会返回错误消息。

MinAge(int minYears, String dateFormat, String errorMessage)

验证给定日期是否比 minYears 年长。如果输入日期格式不正确，也会返回错误消息。

MaxLength(int length, String errorMessage)

验证给定输入长度是否等于或小于 length。

MinLength(int length, String errorMessage)

验证给定输入长度是否等于或大于 length。

Regex(String expression, String errorMessage)

验证给定输入值是否匹配模式 expression。

Required(String expression, String errorMessage)

验证给定输入值是否不为空或无效。

ValidDateFormat(String dateFormat, String errorMessage)

验证给定输入日期是否与 dateFormat 匹配。

Validator

该类包含最重要的验证方法 validate。如果有不同的验证类型传递给此方法，它将返回第一个不满足验证条件的验证类型的错误消息。

// 调用 validate 方法并传入一个不满足 Required 但满足 MinLength 的值，将返回 MinLength 错误消息
expect(
  "最小长度不正确",
  Validator.validate("mat", [
    Required("输入不能为空"),
    MinLength(5, "最小长度不正确")
  ])
);

// 调用 validate 方法并传入一个同时满足 Required 和 MinLength 的值，将返回 null
expect(
  null,
  Validator.validate("matej", [
    Required("输入不能为空"),
    MinLength(5, "最小长度不正确")
  ])
);

注意事项

扩展 ValidationType

如果你需要定义和验证其他验证类型，可以扩展 ValidationType 类。

class CustomValidationType extends ValidationType {
  CustomValidationType(super.errorMessage);

  [@override](/user/override)
  bool isValid(String? inputValue) {
    // 实现验证条件
  }
}

支持

如果你愿意支持这个库，可以建议一些尚未实现的验证类型。

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const appTitle = '表单验证演示';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: const MyCustomForm(),
      ),
    );
  }
}

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

  [@override](/user/override)
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            decoration: const InputDecoration(
              hintText: '必需，最大长度检查',
            ),
            validator: (value) {
              return Validator.validate(value, [
                Required("输入不能为空"),
                MaxLength(4, "最大长度不正确")
              ]);
            },
          ),
          TextFormField(
            decoration: const InputDecoration(
              hintText: '必需，日期格式验证，最大年龄和最小长度检查',
            ),
            validator: (value) {
              return Validator.validate(value, [
                Required("输入不能为空"),
                ValidDateFormat("dd/MM/yyyy", "日期格式不正确"),
                MaxAge(15, "dd/MM/yyyy", "你太老了"),
                MinLength(2, "最小长度不正确")
              ]);
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('处理数据中')),
                  );
                }
              },
              child: const Text('提交'),
            ),
          ),
        ],
      ),
    );
  }
}