Flutter表单验证插件fast_validator的使用

fast_validator 是一个用于快速验证Flutter应用程序中各种输入字段（如文本、日期等）的包。它提供了许多内置的常用验证器，并支持自定义验证器以满足特定需求。

快速开始

安装

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  fast_validator: ^latest_version # 替换为最新版本号

然后执行 flutter pub get 来安装包。

导入

在 Dart 文件中导入 fast_validator 包：

import 'package:fast_validator/fast_validator.dart';

使用示例

下面是一个完整的示例，展示了如何在 Flutter 应用程序中使用 fast_validator 进行表单验证。此示例包含了一个简单的用户界面，允许用户输入电子邮件地址并点击按钮进行验证。

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late TextEditingController textController;
  String? error;

  @override
  void initState() {
    textController = TextEditingController();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Fast Validator Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text('User email *', style: TextStyle(fontSize: 24)),
              SizedBox(
                width: double.infinity,
                child: TextField(
                  controller: textController,
                  style: const TextStyle(fontSize: 20),
                  decoration: InputDecoration(
                    contentPadding:
                        const EdgeInsets.symmetric(horizontal: 8, vertical: 12),
                    border: OutlineInputBorder(
                      borderSide: BorderSide(width: 2, color: Colors.blue),
                    ),
                    errorText: error,
                  ),
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _validate,
                child: const Text('Validate'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _validate() {
    setState(() => error = null); // reset the error message

    String text = textController.text.trim(); // extract the text to be validated.

    ValidationResult result = FastValidator.validate(
      text,
      fieldName: 'Email',
      validators: [
        FastRequiredValidation(),
        FastEmailValidation(customMessage: 'Invalid email format')
      ], // validate
    );

    debugPrint('Result: ${result.result}');
    debugPrint('Valid: ${result.valid}');
    debugPrint('Type: ${result.type}');
    debugPrint('ErrorMsg: ${result.errorMessage}');

    if (!result.valid) {
      setState(() => error = result.errorMessage); // update the error message
    } else {
      // Handle valid input here
      debugPrint('Input is valid');
    }
  }
}

在这个例子中：

• 我们创建了一个简单的表单，其中包含一个用于输入电子邮件地址的 TextField 和一个用于触发验证的 ElevatedButton。
• 当用户点击按钮时，会调用 _validate() 方法来进行验证。
• 如果验证失败，则会在 TextField 下方显示错误信息；如果成功，则可以在控制台输出 “Input is valid”。

内置验证器

fast_validator 提供了许多内置验证器，可以直接使用来简化开发过程。例如：

• FastRequiredValidation()：检查字段是否为空或null。
• FastEmailValidation()：验证邮箱格式。
• FastMinLengthValidation(minLength)：验证字符串最小长度。
• FastMaxLengthValidation(maxLength)：验证字符串最大长度。
• FastExactLengthValidation(length)：验证字符串确切长度。
• FastDigitsOnlyValidation()：验证字符串是否仅包含数字。
• FastAlphabetsOnlyValidation()：验证字符串是否仅包含字母。
• FastAlphaNumericOnlyValidation()：验证字符串是否仅包含字母和数字。
• FastAllowedCharactersValidation(allowedCharacters)：验证字符串是否只包含指定字符集中的字符。
• FastRegexValidation(pattern)：通过正则表达式验证字符串。
• FastPasswordValidation()：验证密码强度（可以根据需要调整规则）。
• FastDateValidation()：验证日期格式。
• FastCreditCardValidation()：验证信用卡号码（使用Luhn算法）。
• FastGSTNumberValidation()：验证印度GST号码。
• FastPhoneNumberValidation()：验证电话号码格式。

更多内置验证器及其用法，请参考 官方文档。

自定义验证器

除了使用内置验证器外，您还可以根据自己的业务逻辑创建自定义验证器。只需继承 FastValidation 类并重写 validate<T>() 方法即可。

class MyCustomValidator extends FastValidation {
  final String? errorMessage;

  MyCustomValidator({this.errorMessage});

  @override
  ValidationResult<T> validate<T>(T toValidate, String? fieldName) {
    String? error;
    bool valid = true;
    ResultType outputType = ResultType.valid;

    // 自定义验证逻辑
    if (toValidate.runtimeType != String) {
      error = errorMessage ?? 'This field must be a string';
      valid = false;
      outputType = ResultType.invalid;
    }

    return ValidationResult<T>(
      errorMessage: error,
      type: outputType,
      valid: valid,
      result: toValidate,
    );
  }
}

之后就可以像使用其他内置验证器一样，在 FastValidator.validate() 函数中使用自定义验证器了。

总结

fast_validator 是一个强大且易于使用的Flutter表单验证库，能够帮助开发者快速实现对用户输入数据的有效性检查。无论是简单地使用内置验证器还是构建复杂的自定义验证逻辑，它都能提供良好的支持。希望本文能帮助您更好地理解和应用这个优秀的工具！

如果您有任何问题或者建议，欢迎随时联系我。祝编程愉快！