Flutter表单验证插件form_validation的使用

目录

• form_validation
  • 使用库
  • 内置验证器
  • 验证消息和翻译
  • JSON支持
    • CurrencyValidator
    • EmailValidator
    • MaxLengthValidator
    • MaxNumberValidator
    • MinLengthValidator
    • MinNumberValidator
    • NumberValidator
    • PhoneNumberValidator
    • RequiredValidator
  • 自定义验证器
    • 示例

form_validation

form_validation 提供了一系列可以直接通过代码或从 JSON 构建的表单验证器，以提供更动态的验证。

使用库

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  form_validation: ^latest_version

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

flutter packages get

内置验证器

以下是 form_validation 提供的内置验证器列表：

注意：除了 RequiredValidator 外，所有内置验证器都会在值为 null 或空时通过验证。

验证消息和翻译

该库提供了默认的英文错误消息。可以通过更新 FormValidationTranslations.values 来更改语言。以下是可用的键：

JSON支持

Validator 类可以用于解码多个 ValueValidator 实例。每个内置验证器都可以通过 JSON 进行反序列化。以下是一个完整的 JSON 结构示例：

{
  "validators": [
    // 一个或多个验证器对象
  ]
}

CurrencyValidator

{
  "allowNegative": true, // 是否允许负值，默认为 true
  "type": "currency"
}

EmailValidator

{
  "type": "email"
}

MaxLengthValidator

{
  "length": 10, // 最大字符数
  "type": "max_length"
}

MaxNumberValidator

{
  "number": 100, // 最大数值
  "type": "max_number"
}

MinLengthValidator

{
  "length": 5, // 最小字符数
  "type": "min_length"
}

MinNumberValidator

{
  "number": 1, // 最小数值
  "type": "min_number"
}

NumberValidator

{
  "type": "number"
}

PhoneNumberValidator

{
  "type": "phone_number"
}

RequiredValidator

{
  "type": "required"
}

自定义验证器

可以通过扩展 ValueValidator 抽象类来自定义验证器，或者使用 registerCustomValidatorBuilder 函数注册自定义验证器类型。

示例

class MyCustomValidator extends ValueValidator {
  static const type = 'my_custom_validator';

  static MyCustomValidator fromDynamic(dynamic map) {
    if (map != null && map['type'] == type) {
      return MyCustomValidator();
    }
    return null;
  }

  @override
  Map<String, dynamic> toJson() => {"type": type};

  @override
  String validate({
    @required BuildContext context,
    @required String label,
    @required String value,
  }) {
    if (value?.isNotEmpty == true && value.length < 6) {
      return 'Value must be at least 6 characters long';
    }
    return null;
  }
}

void main() {
  Validator.registerCustomValidatorBuilder(
    MyCustomValidator.type,
    MyCustomValidator.fromDynamic,
  );

  runApp(const MyApp());
}

// JSON 示例
var jsonStr = '''
{
  "validators": [{
    "type": "required"
  }, {
    "type": "my_custom_validator"
  }]
}
''';

var validator = Validator.fromDynamic(json.decode(jsonStr));

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 form_validation 插件进行表单验证：

import 'package:flutter/material.dart';
import 'package:form_floating_action_button/form_floating_action_button.dart';
import 'package:form_validation/form_validation.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Validation Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
    required this.title,
  });
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool _loading = false;

  void _onSubmit() async {
    setState(() => _loading = true);
    await Future.delayed(const Duration(seconds: 3));
    _loading = false;
    if (mounted == true) {
      setState(() {});
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      child: Builder(
        builder: (BuildContext context) => Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: SingleChildScrollView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                TextFormField(
                  decoration: const InputDecoration(
                    labelText: 'Required',
                  ),
                  validator: (value) {
                    final validator = Validator(
                      validators: [const RequiredValidator()],
                    );

                    return validator.validate(
                      label: 'Required',
                      value: value,
                    );
                  },
                ),
                const SizedBox(
                  height: 16.0,
                ),
                TextFormField(
                  decoration: const InputDecoration(
                    labelText: 'Email',
                  ),
                  validator: (value) {
                    final validator = Validator(
                      validators: [
                        const RequiredValidator(),
                        const EmailValidator(),
                      ],
                    );

                    return validator.validate(
                      label: 'Email',
                      value: value,
                    );
                  },
                ),
                const SizedBox(
                  height: 16.0,
                ),
                TextFormField(
                  decoration: const InputDecoration(
                    labelText: 'Min 3 / Max 5 Length',
                  ),
                  validator: (value) {
                    final validator = Validator(
                      validators: [
                        const MaxLengthValidator(length: 5),
                        const MinLengthValidator(length: 3),
                      ],
                    );

                    return validator.validate(
                      label: 'Min 3 / Max 5 Length',
                      value: value,
                    );
                  },
                ),
              ],
            ),
          ),
          floatingActionButton: FormFloatingActionButton(
            loading: _loading,
            onSubmit: _onSubmit,
            onValidate: () async {
              var error = false;

              try {
                final form = Form.of(context);

                error = form.validate();
              } catch (e) {
                // no-op
              }
              return error;
            },
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用 form_validation 插件创建一个简单的表单，并对输入字段进行验证。希望这对你有所帮助！