Flutter表单验证通知插件validation_notifier的使用

Flutter表单验证通知插件validation_notifier的使用

ValidationNotifier 是一个基于 ValueNotifier 的类，它允许你为输入值定义自定义验证规则，并在输入值发生变化时自动触发验证。下面我们将详细介绍如何使用 validation_notifier 插件进行表单验证，并提供一个完整的示例代码。

1. 创建验证规则

你可以通过继承 ValidationRule<T> 来创建自己的验证规则。每个规则需要实现两个方法：

• errorMessage: 当验证失败时显示的错误信息。
• checkIsValid: 检查输入值是否符合规则。

示例：创建必填字段规则

import 'package:validation_notifier/validation_notifier.dart';

class RequiredStringRule extends ValidationRule<String> {
  const RequiredStringRule();

  [@override](/user/override)
  String get errorMessage => '此字段是必填项';

  [@override](/user/override)
  bool checkIsValid(String? value) {
    return value?.isNotEmpty ?? false;
  }
}

示例：创建电子邮件格式规则

import 'package:validation_notifier/validation_notifier.dart';

class EmailFormatRule extends ValidationRule<String> {
  static final emailRegex = RegExp(
      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$');

  const EmailFormatRule();

  [@override](/user/override)
  String get errorMessage => '无效的电子邮件格式';

  [@override](/user/override)
  bool checkIsValid(String? value) {
    if (value == null) {
      return false;
    } else {
      return emailRegex.hasMatch(value);
    }
  }
}

2. 添加验证规则

你可以将创建的规则添加到 ValidationNotifier<T> 中。ValidationNotifier<T> 会根据你定义的规则对输入值进行验证。

final email = ValidationNotifier<String>(rules: const [
  RequiredStringRule(),
  EmailFormatRule(),
]);

3. 使用 ValueListenableBuilder 构建表单

ValueListenableBuilder 可以监听 ValidationNotifier 的变化，并在输入值发生变化时更新 UI。我们可以使用它来构建 TextFormField，并在验证失败时显示错误信息。

ValueListenableBuilder<ValidationResult<String>>(
  valueListenable: email,
  builder: (context, value, child) {
    return TextFormField(
      onChanged: email.update,  // 当输入值发生变化时调用 update 方法
      keyboardType: TextInputType.emailAddress,
      autocorrect: false,
      decoration: InputDecoration(
        labelText: 'Email',
        errorText: value.errorMessage,  // 显示验证错误信息
      ),
    );
  },
)

4. 触发表单验证

你可以通过调用 ValidationNotifier<T>.validate() 方法来手动触发表单验证。通常情况下，我们会在用户点击提交按钮时进行验证。

void onLogin() {
  final emailResult = email.validate();
  final passwordResult = password.validate();

  if (emailResult.isValid && passwordResult.isValid) {
    // 验证成功，执行登录逻辑
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('所有字段都有效')));
  } else {
    // 验证失败，打印错误信息
    print('Email 错误: ${emailResult.errorMessage}');
    print('Password 错误: ${passwordResult.errorMessage}');
  }
}

5. 完整示例代码

下面是一个完整的示例代码，展示了如何使用 validation_notifier 插件来构建一个包含电子邮件和密码输入的登录表单。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              constraints: BoxConstraints(
                maxWidth: 512,
                maxHeight: constraints.maxHeight,
              ),
              child: const _LoginForm(),
            ),
          );
        },
      ),
    );
  }
}

class _LoginForm extends StatefulWidget {
  const _LoginForm({Key? key}) : super(key: key);

  [@override](/user/override)
  _LoginFormState createState() => _LoginFormState();
}

class _LoginFormState extends State<_LoginForm> {
  final email = ValidationNotifier<String>(
    rules: const [
      RequiredStringRule(),
      EmailFormatRule(),
    ],
  );

  final password = ValidationNotifier<String>(
    rules: const [
      RequiredStringRule(),
      StringLengthRule(8),  // 密码长度至少为8个字符
    ],
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      children: [
        ValueListenableBuilder<ValidationResult<String>>(
          valueListenable: email,
          builder: (context, value, child) {
            return TextFormField(
              onChanged: email.update,  // 当输入值发生变化时调用 update 方法
              keyboardType: TextInputType.emailAddress,
              autocorrect: false,
              decoration: InputDecoration(
                labelText: 'Email',
                errorText: value.errorMessage,  // 显示验证错误信息
              ),
            );
          },
        ),
        const SizedBox(height: 24),
        ValueListenableBuilder<ValidationResult<String>>(
          valueListenable: password,
          builder: (context, value, child) {
            return TextFormField(
              onChanged: password.update,  // 当输入值发生变化时调用 update 方法
              decoration: InputDecoration(
                labelText: 'Password',
                errorText: value.errorMessage,  // 显示验证错误信息
              ),
              obscureText: true,  // 隐藏密码输入
            );
          },
        ),
        const SizedBox(height: 24),
        ElevatedButton(
          onPressed: _onLogin,
          child: const Text('LOGIN'),
        )
      ],
    );
  }

  void _onLogin() {
    final emailResult = email.validate();
    final passwordResult = password.validate();

    if (emailResult.isValid && passwordResult.isValid) {
      // 验证成功，执行登录逻辑
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('所有字段都有效')));
    } else {
      // 验证失败，打印错误信息
      print('Email 错误: ${emailResult.errorMessage}');
      print('Password 错误: ${passwordResult.errorMessage}');
    }
  }
}