Flutter表单验证插件lite_validator的使用

当然，下面是一个关于如何使用Flutter表单验证插件lite_validator的代码示例。这个示例展示了如何使用lite_validator来进行基本的表单验证。

首先，确保在你的pubspec.yaml文件中添加lite_validator依赖：

dependencies:
  flutter:
    sdk: flutter
  lite_validator: ^x.y.z  # 替换为最新版本号

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

接下来，让我们创建一个简单的Flutter应用，使用lite_validator来进行表单验证。

1. 创建数据模型

首先，我们需要定义一个数据模型，并在模型中设置验证规则。

import 'package:lite_validator/lite_validator.dart';

class UserModel extends LiteValidatable {
  String? name;
  String? email;
  String? password;

  UserModel({this.name, this.email, this.password});

  @override
  void defineRules() {
    addRule('name', 'Name is required', (value) => value!.isNotEmpty);
    addRule('email', 'Email is required', (value) => value!.isNotEmpty);
    addRule('email', 'Invalid email address', (value) => RegExp(r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$").hasMatch(value!));
    addRule('password', 'Password is required', (value) => value!.isNotEmpty);
    addRule('password', 'Password must be at least 6 characters long', (value) => value!.length >= 6);
  }
}

2. 创建UI表单

接下来，我们创建一个简单的UI表单来收集用户输入，并使用lite_validator进行验证。

import 'package:flutter/material.dart';
import 'package:lite_validator/lite_validator.dart';
import 'user_model.dart';  // 假设上面的数据模型保存在user_model.dart文件中

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Form Validation with lite_validator'),
        ),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final UserModel user = UserModel();
  final formKey = GlobalKey<FormState>();

  void _submitForm() {
    if (formKey.currentState!.validate()) {
      if (user.validate()) {
        // 如果所有验证都通过，这里可以处理表单提交
        print('Form submitted successfully!');
        print('Name: ${user.name}');
        print('Email: ${user.email}');
        print('Password: ${user.password}');
      } else {
        // 使用lite_validator的验证结果提示用户
        user.errors.forEach((key, value) {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("$key: $value")));
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: 'Name'),
              validator: (value) {
                // 这里使用Flutter内置的验证器进行初步验证
                if (value == null || value.isEmpty) {
                  return 'Name is required';
                }
                return null;
              },
              onSaved: (value) => user.name = value,
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Email'),
              validator: (value) {
                // 这里使用Flutter内置的验证器进行初步验证
                if (value == null || value.isEmpty) {
                  return 'Email is required';
                } else if (!RegExp(r"^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$").hasMatch(value!)) {
                  return 'Invalid email address';
                }
                return null;
              },
              onSaved: (value) => user.email = value,
            ),
            TextFormField(
              decoration: InputDecoration(labelText: 'Password'),
              validator: (value) {
                // 这里使用Flutter内置的验证器进行初步验证
                if (value == null || value.isEmpty) {
                  return 'Password is required';
                } else if (value!.length < 6) {
                  return 'Password must be at least 6 characters long';
                }
                return null;
              },
              obscureText: true,
              onSaved: (value) => user.password = value,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _submitForm,
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 运行应用

现在，你可以运行你的Flutter应用，并尝试填写表单。你会发现，表单字段将首先通过Flutter内置的验证器进行初步验证，然后在提交表单时通过lite_validator进行更详细的验证。

这个示例展示了如何使用lite_validator来增强Flutter应用的表单验证功能。你可以根据实际需要扩展和自定义验证规则。