Flutter表单验证插件form_warden的使用

Flutter表单验证插件form_warden的使用

form_warden 是一个非常简单的包，旨在帮助你编写健壮、可重用且可扩展的验证规则，以配合你的Flutter表单。

如何工作

构建块

创建简单的或复杂的验证块，并将这些构建块组合起来形成Flutter验证器。每个块都有自己的逻辑、一套参数以创建动态验证器，并为每个块指定特定的错误消息。

有简单的验证器、可配置的验证器，甚至可以根据应用领域创建验证器。

创建一个守护者

一个守护者是一个包含多个验证块的集合。下面是一些示例，包括枚举和电子邮件模式检查。

安装

要使用此包，你需要在pubspec.yaml文件中添加form_warden作为依赖项。

使用

导入包

import 'package:form_warden/form_warden.dart';

必填字段（内置验证器）

TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: createWarden([Validators.required]),
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: f.label,
    ),
    onSaved: null,
),

必填邮箱字段（使用内置验证器）

TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: createWarden([Validators.required, Validators.email]),
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: f.label,
    ),
    onSaved: null,
),

自定义验证器

ValidatorFunction greaterThanTen = (value) {
    if (value is int && value > 10) {
        return null;
    }
    return "必须大于10";
};

TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: createWarden([greaterThanTen]),
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: f.label,
    ),
    onSaved: null,
)

组合多个验证器以创建强大的验证器

ValidatorFunction greaterThanTen = (value) {
    if (value is int && value > 10) {
        return null;
    }
    return "必须大于10";
};

ValidatorFunction lessThanHundred = (value) {
    if (value is int && value < 100) {
        return null;
    }
    return "必须小于100";
};

TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: createWarden([greaterThanTen, lessThanHundred]),
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: f.label,
    ),
    onSaved: null,
)

使用高阶函数创建可配置的验证器

ValidatorFunction between(int lowerLimit, int upperLimit) {
  ValidatorFunction greaterThanLowerLimit = (dynamic? value) {
    if (value.isEmpty) return null;
    var _v = int.parse(value);
    if (_v > lowerLimit && _v < upperLimit) return null;
    return "值必须在$lowerLimit和$upperLimit之间";
  };
  return greaterThanLowerLimit;
}

TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: createWarden([between(10, 100)]),
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: f.label,
    ),
    onSaved: null,
)

示例代码

以下是一个完整的示例代码，展示了如何使用form_warden来实现表单验证。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Warden Example',
      home: ExampleScreen(),
    );
  }
}

class _FormField {
  final String label;
  final List<dynamic Function(dynamic?)> validators;

  _FormField(this.label, this.validators);
}

class ExampleScreen extends StatefulWidget {
  const ExampleScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  _ExampleScreenState createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  final _form = GlobalKey<FormState>();
  late final List<_FormField> _formFields;

  ValidatorFunction between(int lowerLimit, int upperLimit) {
    ValidatorFunction greaterThanLowerLimit = (dynamic? value) {
      if (value.isEmpty) return null;
      var _v = int.parse(value);
      if (_v > lowerLimit && _v < upperLimit) return null;
      return "值必须在$lowerLimit和$upperLimit之间";
    };
    return greaterThanLowerLimit;
  }

  ValidatorFunction floatingPoint = (dynamic? value) {
    if (value.isEmpty) return null;
    try {
      double.parse(value);
    } on FormatException catch (_) {
      return '请输入有效值';
    }
    return null;
  };

  ValidatorFunction number = (dynamic? value) {
    if (value.isEmpty) return null;
    try {
      int.parse(value);
    } on FormatException catch (_) {
      return '请输入有效值';
    }
    return null;
  };

  [@override](/user/override)
  void initState() {
    super.initState();
    this._formFields = [
      _FormField(
        "姓名",
        [Validators.required],
      ),
      _FormField(
        "仅浮点数",
        [Validators.required, floatingPoint],
      ),
      _FormField(
        "介于10和100之间",
        [Validators.required, number, between(10, 100)],
      ),
      _FormField(
        "有效邮箱",
        [Validators.required, Validators.email],
      ),
    ];
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Warden Example"),
      ),
      body: Container(
        child: Form(
          key: this._form,
          child: Padding(
            padding: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
            child: Wrap(
              alignment: WrapAlignment.center,
              runSpacing: 20,
              children: [
                ..._formFields.map(
                  (f) => TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    validator: createWarden(f.validators),
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: f.label,
                    ),
                    onSaved: null,
                  ),
                ),
                SizedBox(
                  width: double.infinity,
                  child: ElevatedButton(
                    onPressed: () {
                      this._form.currentState!.validate();
                    },
                    child: Text('验证'),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}