Flutter表单验证插件wc_form_validators的使用

简介

wc_form_validators 是一个Flutter插件，它提供了一系列可以用于表单字段的验证器。这个插件受到了Angular Validators类的启发，旨在简化Flutter中的表单验证过程。以下是关于如何使用该插件进行表单验证的详细介绍。

使用方法

1. 添加依赖

首先，在pubspec.yaml文件中添加wc_form_validators作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  wc_form_validators: ^最新版本号

2. 导入库

在需要使用的Dart文件顶部导入wc_form_validators：

import 'package:wc_form_validators/wc_form_validators.dart';

3. 验证器示例

3.1 必填项验证 (Required)

确保文本框不为空。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  validator: Validators.required('Name is required'),
),

3.2 最小值验证 (Minimum)

验证输入是否大于等于指定值。

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true),
  decoration: InputDecoration(
    labelText: 'Minimum 5',
  ),
  validator: Validators.min(5, 'Value less than 5 not allowed'),
),

3.3 最大值验证 (Maximum)

验证输入是否小于等于指定值。

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true),
  decoration: InputDecoration(
    labelText: 'Maximum 5',
  ),
  validator: Validators.max(5, 'Value greater than 5 not allowed'),
),

3.4 邮箱格式验证 (Email)

验证输入是否符合邮箱格式。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Email',
  ),
  validator: Validators.email('Invalid email address'),
),

3.5 最小长度验证 (Min Length)

验证输入字符串长度是否大于等于指定值。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Minimum length 5',
  ),
  validator: Validators.minLength(5, 'Characters are less than 5'),
),

3.6 最大长度验证 (Max Length)

验证输入字符串长度是否小于等于指定值。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Maximum length 5',
  ),
  validator: Validators.maxLength(5, 'Characters are greater than 5'),
),

3.7 正则表达式模式匹配 (Pattern)

根据自定义正则表达式验证输入内容。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Only alphabets',
  ),
  validator: Validators.patternString(r"^[A-Za-z]+$", 'Only alphabets are allowed'),
),

3.8 多个验证组合 (Compose)

将多个验证器组合在一起使用。

TextFormField(
  decoration: InputDecoration(
    labelText: 'Name',
  ),
  validator: Validators.compose([
    Validators.required('Name is required'),
    Validators.minLength(5, 'Name cannot be less than 5 characters'),
    Validators.maxLength(10, 'Name cannot be greater than 10 characters'),
  ]),
),

4. 完整示例代码

以下是一个完整的示例应用程序，展示了如何集成上述所有类型的验证器：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(),
        ),
        buttonTheme: ButtonThemeData(
          textTheme: ButtonTextTheme.primary,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Validators Example'),
        ),
        body: _Body(),
      ),
    );
  }
}

class _Body extends StatelessWidget {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // Form is valid
      print("Form Submitted");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: ListView(
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Name',
              ),
              validator: Validators.compose([
                Validators.required('Name is required'),
                Validators.minLength(5, 'Name cannot be less than 5 characters'),
                Validators.maxLength(10, 'Name cannot be greater than 10 characters'),
              ]),
            ),
            TextFormField(
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
              ),
              validator: Validators.email('Invalid email address'),
            ),
            TextFormField(
              keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true),
              decoration: InputDecoration(
                labelText: 'Minimum 5',
              ),
              validator: Validators.min(5, 'Value less than 5 not allowed'),
            ),
            TextFormField(
              keyboardType: TextInputType.numberWithOptions(decimal: true, signed: true),
              decoration: InputDecoration(
                labelText: 'Maximum 5',
              ),
              validator: Validators.max(5, 'Value greater than 5 not allowed'),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Minimum length 5',
              ),
              validator: Validators.minLength(5, 'Characters are less than 5'),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Maximum length 5',
              ),
              validator: Validators.maxLength(5, 'Characters are greater than 5'),
            ),
            TextFormField(
              decoration: InputDecoration(
                labelText: 'Only alphabets',
              ),
              validator: Validators.patternString(r"^[A-Za-z]+$", 'Only alphabets are allowed'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _submitForm,
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

此示例创建了一个包含多种不同类型验证器的表单，并通过点击“Submit”按钮来触发验证逻辑。如果所有验证都通过，则会在控制台打印一条消息表示表单已成功提交。