Flutter表单验证插件form_builder_validators的使用

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

Flutter表单验证插件form_builder_validators的使用

form_builder_validators 是一个用于任何 FormField 小部件或扩展 FormField 类的小部件（例如 TextFormField、DropdownFormField 等）的验证器集合。它提供了标准的现成验证规则，并允许组合多个规则，包括自定义规则。此外，还包含了错误文本消息的本地化支持。

功能特性

  • 提供现成的验证规则
  • 可以组合多个可重用的验证规则
  • 默认错误消息支持多种语言

验证器

该包包含一些常见的 FormFieldValidator，如必填、数字、邮箱、URL、最小值、最大值、最小长度、最大长度、最小单词数、最大单词数、IP、信用卡等，并带有默认的 errorText 消息。

布尔验证器
// 要求字段包含指定数量的小写字母
FormBuilderValidators.hasLowercaseChars()

// 要求字段包含指定数量的数字字符
FormBuilderValidators.hasNumericChars()

// 要求字段包含指定数量的特殊字符
FormBuilderValidators.hasSpecialChars()

// 要求字段包含指定数量的大写字母
FormBuilderValidators.hasUppercaseChars()

// 要求字段为假
FormBuilderValidators.isFalse()

// 要求字段为真
FormBuilderValidators.isTrue()
集合验证器
// 要求字段在提供的列表中
FormBuilderValidators.containsElement()

// 要求字段的长度等于提供的最小长度
FormBuilderValidators.equalLength()

// 要求字段的长度小于等于提供的最大长度
FormBuilderValidators.maxLength()

// 要求字段的长度大于等于提供的最小长度
FormBuilderValidators.minLength()

// 要求字段在范围内
FormBuilderValidators.range()

// 要求字段在提供的列表中是唯一的
FormBuilderValidators.unique()
核心验证器
// 并行运行验证器，收集所有错误
FormBuilderValidators.aggregate()

// 对提供的值运行每个验证器
FormBuilderValidators.compose()

// 条件运行验证器
FormBuilderValidators.conditional()

// 使用默认值运行验证器，当提供的值为null时
FormBuilderValidators.defaultValue()

// 要求字段的值等于提供的对象
FormBuilderValidators.equal()

// 运行验证器并记录值
FormBuilderValidators.log()

// 要求字段的值不等于提供的对象
FormBuilderValidators.notEqual()

// 运行每个验证器，只要有一个通过就通过
FormBuilderValidators.or()

// 要求字段非空
FormBuilderValidators.required()

// 运行验证器并跳过验证，如果满足某个条件
FormBuilderValidators.skipWhen()

// 在运行验证器前转换值
FormBuilderValidators.transform()
日期时间验证器
// 要求字段的值在未来
FormBuilderValidators.dateFuture()

// 要求字段的值在过去
FormBuilderValidators.datePast()

// 要求字段的值在一个日期范围内
FormBuilderValidators.dateRange()

// 要求字段的值是一个有效的日期时间
FormBuilderValidators.dateTime()

// 要求字段的值是一个有效的日期字符串
FormBuilderValidators.date()

// 要求字段的值是一个有效的时间字符串
FormBuilderValidators.time()

// 要求字段的值是一个有效的时区
FormBuilderValidators.timeZone()
文件验证器
// 要求字段的值是一个有效的文件扩展名
FormBuilderValidators.fileExtension()

// 要求字段的值是一个有效的文件名
FormBuilderValidators.fileName()

// 要求字段的值小于最大大小
FormBuilderValidators.fileSize()

// 要求字段的值是一个有效的MIME类型
FormBuilderValidators.mimeType()

// 要求字段的值是一个有效的文件或文件夹路径
FormBuilderValidators.path()
金融验证器
// 要求字段的值是一个有效的BIC
FormBuilderValidators.bic()

// 要求字段的值是一个有效的信用卡CVC号码
FormBuilderValidators.creditCardCVC()

// 要求字段的值是一个有效的信用卡到期日期，并检查是否未过期
FormBuilderValidators.creditCardExpirationDate()

// 要求字段的值是一个有效的信用卡号
FormBuilderValidators.creditCard()

// 要求字段的值是一个有效的IBAN
FormBuilderValidators.iban()
身份验证器
// 要求字段的值是一个有效的城市名称
FormBuilderValidators.city()

// 要求字段的值是一个有效的国家名称
FormBuilderValidators.country()

// 要求字段的值是一个有效的名字
FormBuilderValidators.firstName()

// 要求字段的值是一个有效的姓氏
FormBuilderValidators.lastName()

// 要求字段的值是一个有效的护照号码
FormBuilderValidators.passportNumber()

// 要求字段的值是一个有效的密码
FormBuilderValidators.password()

// 要求字段的值是一个有效的社会安全号码
FormBuilderValidators.ssn()

// 要求字段的值是一个有效的州名称
FormBuilderValidators.state()

// 要求字段的值是一个有效的街道名称
FormBuilderValidators.street()

// 要求字段的值是一个有效的用户名
FormBuilderValidators.username()

// 要求字段的值是一个有效的邮政编码
FormBuilderValidators.zipCode()
网络验证器
// 要求字段的值是一个有效的电子邮件地址
FormBuilderValidators.email()

// 要求字段的值是一个有效的IP地址
FormBuilderValidators.ip()

// 要求字段的值是一个有效的纬度
FormBuilderValidators.latitude()

// 要求字段的值是一个有效的经度
FormBuilderValidators.longitude()

// 要求字段的值是一个有效的MAC地址
FormBuilderValidators.macAddress()

// 要求字段的值是一个有效的电话号码
FormBuilderValidators.phoneNumber()

// 要求字段的值是一个有效的端口号
FormBuilderValidators.portNumber()

// 要求字段的值是一个有效的URL
FormBuilderValidators.url()
数字验证器
// 要求字段的值在两个数字之间
FormBuilderValidators.between()

// 要求字段的值是一个偶数
FormBuilderValidators.evenNumber()

// 要求字段的值是一个整数
FormBuilderValidators.integer()

// 要求字段的值小于等于提供的数字
FormBuilderValidators.max()

// 要求字段的值大于等于提供的数字
FormBuilderValidators.min()

// 要求字段的值是一个负数
FormBuilderValidators.negativeNumber()

// 要求字段的值不是一个零
FormBuilderValidators.notZeroNumber()

// 要求字段的值是一个有效的数字
FormBuilderValidators.numeric()

// 要求字段的值是一个奇数
FormBuilderValidators.oddNumber()

// 要求字段的值是一个正数
FormBuilderValidators.positiveNumber()

// 要求字段的值是一个素数
FormBuilderValidators.prime()
字符串验证器
// 要求字段只包含字母字符
FormBuilderValidators.alphabetical()

// 要求子字符串在字段的值中
FormBuilderValidators.contains()

// 要求子字符串在字段的值的末尾
FormBuilderValidators.endsWith()

// 要求字段的值全部小写
FormBuilderValidators.lowercase()

// 要求字段的值不匹配提供的正则表达式模式
FormBuilderValidators.matchNot()

// 要求字段的值匹配提供的正则表达式模式
FormBuilderValidators.match()

// 要求字段的单词数小于等于提供的最大计数
FormBuilderValidators.maxWordsCount()

// 要求字段的单词数大于等于提供的最小计数
FormBuilderValidators.minWordsCount()

// 要求字段的字符串是一行文本
FormBuilderValidators.singleLine()

// 要求子字符串在字段的值的开头
FormBuilderValidators.startsWith()

// 要求字段的值全部大写
FormBuilderValidators.uppercase()
实际应用场景验证器
// 要求字段的值是一个有效的base64字符串
FormBuilderValidators.base64()

// 要求字段的值是一个有效的颜色代码
FormBuilderValidators.colorCode()

// 要求字段的值是一个有效的DUNS
FormBuilderValidators.duns()

// 要求字段的值是一个有效的ISBN
FormBuilderValidators.isbn()

// 要求字段的值是一个有效的json字符串
FormBuilderValidators.json()

// 要求字段的值是一个有效的语言代码
FormBuilderValidators.languageCode()

// 要求字段的值是一个有效的车牌号
FormBuilderValidators.licensePlate()

// 要求字段的值是一个有效的uuid
FormBuilderValidators.uuid()

// 要求字段的值是一个有效的VIN号
FormBuilderValidators.vin()
扩展方法验证器
// 结合当前验证器和另一个验证器使用逻辑与
FormBuilderValidator.and()

// 结合当前验证器和另一个验证器使用逻辑或
FormBuilderValidator.or()

// 添加条件，仅在满足条件时应用验证器
FormBuilderValidator.when()

// 添加条件，仅在不满足条件时应用验证器
FormBuilderValidator.unless()

// 在应用验证器前转换值
FormBuilderValidator.transform()

// 如果条件满足，则跳过验证器
FormBuilderValidator.skipWhen()

// 在验证过程中记录值
FormBuilderValidator.log()

// 覆盖当前验证器的错误消息
FormBuilderValidator.withErrorMessage()

支持的语言

验证器支持以下语言的默认 errorText 消息：

  • 阿尔巴尼亚语 (al)
  • 阿拉伯语 (ar)
  • 孟加拉语 (bn)
  • 波斯尼亚语 (bs)
  • 保加利亚语 (bg)
  • 加泰罗尼亚语 (ca)
  • 中文简体 (zh_Hans)
  • 中文繁体 (zh_Hant)
  • 克罗地亚语 (hr)
  • 捷克语 (cs)
  • 丹麦语 (da)
  • 荷兰语 (nl)
  • 英语 (en)
  • 爱沙尼亚语 (et)
  • 芬兰语 (fi)
  • 波斯语/波斯语 (fa)
  • 法语 (fr)
  • 德语 (de)
  • 希腊语 (el)
  • 希伯来语 (he)
  • 匈牙利语 (hu)
  • 印地语 (hi)
  • 印度尼西亚语 (id)
  • 意大利语 (it)
  • 日语 (ja)
  • 库尔德语 (ku)
  • 韩语 (ko)
  • 高棉语 (km)
  • 老挝语 (lo)
  • 拉脱维亚语 (lv)
  • 马来语 (ms)
  • 蒙古语 (mn)
  • 挪威语 (no)
  • 波兰语 (pl)
  • 葡萄牙语 (pt)
  • 罗马尼亚语 (ro)
  • 俄语 (ru)
  • 斯洛伐克语 (sk)
  • 斯洛文尼亚语 (sl)
  • 西班牙语 (es)
  • 斯瓦希里语 (sw)
  • 瑞典语 (se)
  • 泰米尔语 (ta)
  • 泰语 (th)
  • 土耳其语 (tr)
  • 乌克兰语 (uk)
  • 越南语 (vi)

你还可以添加自己的自定义错误消息。

使用

设置

默认的错误消息是英文。为了在应用程序中本地化默认的错误消息，需要将 FormBuilderLocalizations.delegate 添加到应用程序的 localizationsDelegates 列表中。

return MaterialApp(
    supportedLocales: [
        Locale('de'),
        Locale('en'),
        Locale('es'),
        Locale('fr'),
        Locale('it'),
        ...
    ],
    localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        FormBuilderLocalizations.delegate,
    ],
);
基本使用
TextFormField(
    decoration: InputDecoration(labelText: 'Name'),
    autovalidateMode: AutovalidateMode.always,
    validator: FormBuilderValidators.required(),
),
特定用途
组合多个验证器

FormBuilderValidators 类提供了一个名为 compose() 的静态函数，可以接受一个 FormFieldValidator 函数列表。组合允许你创建一次并在多个字段、小部件或应用程序中重复使用验证规则。

TextFormField(
    decoration: InputDecoration(labelText: 'Age'),
    keyboardType: TextInputType.number,
    autovalidateMode: AutovalidateMode.always,
    validator: FormBuilderValidators.compose([
        /// 使此字段必填
        FormBuilderValidators.required(),

        /// 确保输入值是数字 - 自定义错误消息
        FormBuilderValidators.numeric(errorText: 'La edad debe ser numérica.'),

        /// 设置最大值为70
        FormBuilderValidators.max(70),

        /// 包括你自己的自定义 `FormFieldValidator` 函数，如果需要
        /// 确保正值。我们也可以使用 `FormBuilderValidators.min(0)` 代替
        (val) {
            final number = int.tryParse(val);
            if (number == null) return null;
            if (number < 0) return 'We cannot have a negative age';
            return null;
        },
    ]),
),
修改特定语言的默认错误消息

有关详细信息，请参阅 override_form_builder_localizations_en。

迁移

v10到v11
  • 所有验证器现在首先检查空值或空字符串，并返回错误。如果需要避免此行为，可以将 checkNullOrEmpty 设置为 false。
  • dateString() 更改为 date() 以保持API命名一致性。只需更改名称即可修复代码。
  • 验证器的位置参数不再是 String 模式，而是 RegExp 正则表达式。
v7到v8
  • 移除验证函数中的 context 参数。例如，FormBuilderValidators.required(context) 变为 FormBuilderValidators.required()，无需传递 context。

支持

你可以通过以下方式为该包做出贡献：

  • 初学者：报告问题或请求新功能
  • 中级：回答问题，实现新功能（来自问题或未来自问题），并创建拉取请求
  • 高级：加入组织作为成员，帮助编码、管理问题、讨论新功能和其他事情

有关详细信息，请参阅 贡献文件。

添加新的支持语言

我们欢迎将包的默认验证 errorText 字符串进行国际化/本地化的努力。

  1. 添加ARB文件 在 lib/l10n 文件夹中为每个需要添加支持的语言创建一个ARB文件。文件名应为 intl_<LOCALE_ISO_CODE>.arb。例如：intl_fr.arb 或 intl_fr_FR.arb。

  2. 翻译错误消息 复制并粘贴 intl_en.arb 的内容到新创建的ARB文件中，然后覆盖默认的消息进行翻译。

  3. 生成本地化代码 在包含 pubspec.yaml 文件的包目录中运行生成命令：

    flutter gen-l10n

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

1 回复

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


当然，以下是如何在Flutter应用中使用form_builder_validators插件来进行表单验证的代码示例。

首先，确保你的pubspec.yaml文件中已经添加了form_builder_validators依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_form_builder: ^7.0.0  # 请根据最新版本调整
  form_builder_validators: ^7.0.0  # 请根据最新版本调整

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

接下来，是一个使用form_builder_validators进行表单验证的完整示例：

import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:form_builder_validators/form_builder_validators.dart';

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Builder Validators Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: [
              FormBuilderTextField(
                name: 'name',
                decoration: InputDecoration(labelText: 'Name'),
                validators: [
                  FormBuilderValidators.required(errorText: 'Name is required'),
                  FormBuilderValidators.minLength(
                    3,
                    errorText: 'Name must be at least 3 characters long',
                  ),
                ],
              ),
              FormBuilderTextField(
                name: 'email',
                decoration: InputDecoration(labelText: 'Email'),
                validators: [
                  FormBuilderValidators.required(errorText: 'Email is required'),
                  FormBuilderValidators.email(errorText: 'Email is not valid'),
                ],
              ),
              FormBuilderTextField(
                name: 'age',
                decoration: InputDecoration(labelText: 'Age'),
                keyboardType: TextInputType.number,
                validators: [
                  FormBuilderValidators.required(errorText: 'Age is required'),
                  FormBuilderValidators.numeric(errorText: 'Age must be a number'),
                  FormBuilderValidators.min(18, errorText: 'Age must be at least 18'),
                ],
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    final formValues = _formKey.currentState!.value;
                    print(formValues);
                    // Handle form submission
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的表单，其中包含三个字段：name、email和age。每个字段都使用了FormBuilderTextField组件，并配置了相应的验证器：

  • name字段要求非空且至少3个字符长。
  • email字段要求非空且格式正确。
  • age字段要求非空、必须是数字且至少18岁。

当用户点击“Submit”按钮时，表单将进行验证。如果所有字段都通过验证，将打印表单的值；否则，将显示相应的错误消息。

这个示例展示了如何使用form_builder_validators插件进行表单验证，并且代码结构清晰，易于理解和扩展。

回到顶部