Flutter表单验证插件flutter_validation的使用

描述

这个插件为Flutter应用程序中的表单字段提供了一组常用的验证函数。

示例

以下是插件提供的几种常见验证示例：

验证类型	示例图片
Email
Required
Strong Password
Combined Required and Email
Phone
Maximum Length 16
Combined Email and Phone

主要功能

• 必填字段验证：检查字段是否为空。
• 电子邮件验证：基于正则表达式验证电子邮件地址。
• 电话号码验证：基本电话号码验证（可扩展）。
• 字母数字验证：仅允许字母和数字。
• 密码强度验证：检查大写、小写字母、数字和特殊字符（可自定义）。
• 最小和最大长度验证：强制字段的最小和最大字符长度。
• 组合电话/电子邮件验证：允许用户输入有效的电话号码或电子邮件地址。
• 组合多个验证器：组合多个验证器进行复杂验证。

安装

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

dependencies:
  flutter_validations: ^0.0.2

可用的验证器

• requiredValidator：检查字段是否为空。
• emailValidator：验证电子邮件地址。
• phoneValidator：基本电话号码验证（可扩展）。
• alphanumericValidator：仅允许字母和数字。
• upperCaseValidator：检查密码中是否包含大写字母。
• lowerCaseValidator：检查密码中是否包含小写字母。
• digitValidator：检查密码中是否包含数字。
• specialCharValidator：检查密码中是否包含特殊字符。
• maxLengthValidator：强制最大字符长度。
• minLengthValidator：强制最小字符长度。
• combinedPhoneEmailValidator：允许电话号码或电子邮件。
• combineValidators：组合多个验证器。

使用方法

使用Flutter_validation

使用Validators类及其函数，例如：

必填验证器

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  controller: firstNameController,
  validator: (value) =>
    Validators().requiredValidator(
      errorMessage: '此字段不能为空',
      value: value
    ),
),

电子邮件验证器

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  controller: emailController,
  validator: (value) =>
    Validators().emailValidator(
      errorMessage: '请输入有效的电子邮件地址',
      value: value
    ),
),

组合验证器

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  controller: usernameController,
  validator: (value) =>
    Validators().combineValidators(
      validators: [
        Validators().requiredValidator(errorMessage: '用户名不能为空', value: value),
        Validators().minLengthValidator(minLength: 3, errorMessage: '请输入至少3个字符的用户名', value: value),
        Validators().upperCaseValidator(errorMessage: '用户名必须包含至少1个大写字母', value: value),
      ]
    ),
),

字母数字验证器

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  controller: alphanumericController,
  validator: (value) =>
    Validators().alphanumericValidator(value: value),
  // 这将返回“请输入仅包含字母和数字”的验证错误
),

完整示例代码

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

import 'package:flutter/material.dart';
import 'package:flutter_validation/flutter_validation.dart';
import 'package:flutter_validation/src/validate.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final formKey = GlobalKey<FormState>();

  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  final TextEditingController confirmPassController = TextEditingController();
  final TextEditingController strongPasswordController = TextEditingController();
  final TextEditingController combineController = TextEditingController();
  final TextEditingController phoneController = TextEditingController();
  final TextEditingController maxlenController = TextEditingController();
  final TextEditingController minlenController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Center(
        child: Form(
          key: formKey,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text('电子邮件'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: emailController,
                  validator: (value) =>
                      Validate().emailValidator(
                        errorMessage: '请输入有效的电子邮件地址',
                        value: value
                      ),
                ),
                const SizedBox(height: 20),
                const Text('必填'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: passwordController,
                  validator: (value) =>
                      Validators().requiredValidator(
                        errorMessage: '此字段不能为空',
                        value: value
                      ),
                ),
                const SizedBox(height: 20),
                const Text('强密码'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: confirmPassController,
                  validator: (value) =>
                      Validators().strongPassWordValidation(validations: [
                    Validators().upperCaseValidator(value: value),
                    Validators().lowerCaseValidator(value: value),
                    Validators().digitValidator(value: value),
                    // Validators().specialCharValidator(value: value),
                  ], value: value),
                ),
                const SizedBox(height: 20),
                const Text('带特殊字符的强密码'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: strongPasswordController,
                  validator: (value) =>
                      Validators().strongPassWordValidation(
                        errorMessage: '密码必须包含数字',
                        value: value
                      ),
                ),
                const SizedBox(height: 20),
                const Text('组合必填和电子邮件'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: combineController,
                  validator: (value) =>
                      Validators().combineValidators(validators: [
                    Validators().requiredValidator(value: value),
                    Validators().emailValidator(value: value),
                    Validators().strongPassWordValidation(value: value),
                  ]),
                ),
                const SizedBox(height: 20),
                const Text('电话号码'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: phoneController,
                  validator: (value) =>
                      Validators().phoneValidator(value: value),
                ),
                const SizedBox(height: 20),
                const Text('最大长度 (16)'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: maxlenController,
                  validator: (value) =>
                      Validators().maxLengthValidator(value: value, maxLength: 16),
                ),
                const SizedBox(height: 20),
                const Text('组合电子邮件和电话号码'),
                TextFormField(
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  controller: minlenController,
                  validator: (value) =>
                      Validators().combinedPhoneEmailValidator(value: value),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}