Flutter文本字段验证插件text_field_validation的使用

text_field_validation 是一个用于在Flutter应用中对 TextField 输入进行多种类型数据验证的插件。它支持Google账号、社交网络、日期、数字等多种类型的验证，并且可以轻松集成到你的Flutter项目中。

特性

• 支持验证Google账号、社交网络（如Facebook、Twitter等）、日期、数字、字母数字组合、IMEI、MAC地址等多种类型。
• 提供多种上下文相关的正则表达式，便于根据具体需求定制和更新。
• 可自定义无效输入的响应消息。
• 易于集成到Flutter应用中。

开始使用

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 text_field_validation 包：

dependencies: 
  text_field_validation: ^1.1.5

2. 安装包

运行以下命令来安装包：

flutter packages get

3. 导入包

在你的Dart代码中导入该包：

import 'package:text_field_validation/text_field_validation.dart';

4. 使用示例

基本用法

下面是一个简单的 TextFormField 示例，使用 TextFieldValidation.googleAccount 方法进行验证：

TextFormField(
  validator: (value) => TextFieldValidation.googleAccount(value!),
)

自定义 TextFormField

你也可以创建自己的 TextFormField 组件，并在其中使用不同的验证方法：

class AuthTextField extends StatelessWidget {
  final TextEditingController? controller;
  final Function(String?) onValidate;

  const AuthTextField({super.key, this.controller, required this.onValidate});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      validator: (value) => onValidate(value),
    );
  }
}

// 在表单中使用
Form(
  key: _formKey,
  child: Column(
    children: [
      AuthTextField(
        controller: _emailController,
        onValidate: (value) => TextFieldValidation.email(value!),
      ),
      AuthTextField(
        controller: _passwordController,
        onValidate: (value) => TextFieldValidation.password(value!),
      ),
    ],
  ),
)

完整示例

以下是一个完整的示例程序，演示如何使用 text_field_validation 插件进行用户输入验证：

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

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

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

  final _keyForm = GlobalKey<FormState>();
  final _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Field Validation',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(title: Text('TextField Validation Example')),
          body: Center(
            child: Form(
              key: _keyForm,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  SizedBox(
                    width: 300,
                    child: TextFormField(
                      controller: _controller,
                      decoration: InputDecoration(labelText: 'Enter your name'),
                      validator: (name) => TextFieldValidation.name(name!),
                    ),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      if (_keyForm.currentState!.validate()) {
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('Processing Data')),
                        );
                      }
                    },
                    child: Text('Submit'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}