Flutter表单验证插件rt_formvalidator的使用

Flutter表单验证插件rt_formvalidator的使用

rt_formvalidator 是一个用于 Flutter 的包,它通过 RealTimeTextEditingController 提供实时表单验证。此包允许在用户输入时即时反馈表单字段的输入情况,并提供可定制的验证逻辑、错误处理和视觉指示。

特性

  • 实时验证:用户输入时即时验证表单字段。
  • 可定制的验证器:为每个表单字段定义自己的验证逻辑。
  • 视觉反馈:通过可定制的图标和文本样式显示成功、错误和空闲状态。
  • 表单级验证:轻松检查整个表单是否有效。

安装

pubspec.yaml 文件中添加 rt_formvalidator

dependencies:
  rt_formvalidator: ^0.1.0

然后运行 `flutter pub get` 来安装包。

使用

基本示例

以下是如何在 Flutter 应用程序中使用 rt_formvalidator 的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('RT Form Validator Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatelessWidget {
  final RTFormController formController = RTFormController();
  final TextEditingController firstController = TextEditingController();
  final TextEditingController secondController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return RTFormValidator(
      rtFormController: formController,
      child: Column(
        children: [
          RTTextField(
            controller: firstController,
            validator: (value) {
              if (value == "") {
                return "值不能为空。";
              }
              if (value.length < 5) {
                return "值必须至少包含 5 个字符。";
              }
              return null;
            },
            // 这里是变化的地方!!!
            // 使用 validateOnUserInteraction 时,原生 Flutter 的 TextEditingController 会验证整个表单
            // 此包仅验证字段本身
            validateOnUserInteraction: true,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              errorStyle: TextStyle(),
            ),
            customErrorTextStyle: CustomErrorTextStyle(
              textOverflow: TextOverflow.ellipsis,
              maxLines: 500,
              style: const TextStyle(
                color: Colors.red,
              ),
            ),
            validationPrefixIcons: PrefixValidationIcons(
              iddleIcon: const Icon(Icons.person),
              errorIcon: const Icon(Icons.person, color: Colors.red),
              successIcon: const Icon(Icons.person, color: Colors.green),
            ),
          ),
          RTTextField(
            controller: secondController,
            validator: (value) {
              if (value == "") {
                return "值不能为空。";
              }
              if (value.length < 5) {
                return "值必须至少包含 5 个字符。";
              }
              return null;
            },
            validateOnUserInteraction: true,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
            ),
            customErrorTextStyle: CustomErrorTextStyle(
              maxLines: 2,
              style: const TextStyle(color: Colors.blue),
            ),
            validationPrefixIcons: PrefixValidationIcons(
              iddleIcon: const Icon(Icons.person),
              errorIcon: const Icon(Icons.person, color: Colors.red),
              successIcon: const Icon(Icons.person, color: Colors.green),
            ),
          ),
          ElevatedButton(
            onPressed: () {
              bool isFormValid = formController.isFormValid();
              if (isFormValid) {
                ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("表单有效")));
              }
            },
            child: const Text("验证"),
          ),
        ],
      ),
    );
  }
}

自定义验证图标和样式

您可以为每个 RTTextField 自定义图标和错误文本样式:

RTTextField(
  controller: yourController,
  validator: yourValidator,
  validateOnUserInteraction: true,
  customErrorTextStyle: CustomErrorTextStyle(
    maxLines: 2,
    style: TextStyle(color: Colors.blue),
  ),
  validationPrefixIcons: PrefixValidationIcons(
    iddleIcon: Icon(Icons.person),
    errorIcon: Icon(Icons.person, color: Colors.red),
    successIcon: Icon(Icons.person, color: Colors.green),
  ),
),

检查表单有效性

您可以使用 RTFormController 检查整个表单是否有效:

ElevatedButton(
  onPressed: () {
    bool isFormValid = formController.isFormValid();
    if (isFormValid) {
      // 执行所需的操作
    }
  },
  child: Text("验证"),
),
1 回复

更多关于Flutter表单验证插件rt_formvalidator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


rt_formvalidator 是一个用于 Flutter 的表单验证插件,它可以帮助开发者轻松地实现表单字段的验证。以下是如何使用 rt_formvalidator 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 rt_formvalidator 依赖:

dependencies:
  flutter:
    sdk: flutter
  rt_formvalidator: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 rt_formvalidator 包:

import 'package:rt_formvalidator/rt_formvalidator.dart';

3. 创建表单

使用 FormTextFormField 创建表单,并使用 RtFormValidator 进行验证。

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
            validator: RtFormValidator.email('Please enter a valid email'),
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: RtFormValidator.required('Password is required'),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证通过,处理表单数据
                print('Email: ${_emailController.text}');
                print('Password: ${_passwordController.text}');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}

4. 使用验证器

RtFormValidator 提供了多种内置的验证器,例如:

  • RtFormValidator.required(String errorMessage): 验证字段是否为空。
  • RtFormValidator.email(String errorMessage): 验证电子邮件格式。
  • RtFormValidator.minLength(int minLength, String errorMessage): 验证字段的最小长度。
  • RtFormValidator.maxLength(int maxLength, String errorMessage): 验证字段的最大长度。
  • RtFormValidator.pattern(RegExp regex, String errorMessage): 使用正则表达式验证字段。

你可以根据需要选择合适的验证器。

5. 自定义验证器

如果你需要自定义验证逻辑,可以使用 RtFormValidator.custom

validator: RtFormValidator.custom((value) {
  if (value == null || value.isEmpty) {
    return 'This field is required';
  }
  if (value.length < 6) {
    return 'Must be at least 6 characters';
  }
  return null; // 返回 null 表示验证通过
}),

6. 处理表单提交

在表单提交时,调用 _formKey.currentState!.validate() 来触发所有字段的验证。如果所有字段都通过验证,validate() 方法将返回 true,否则返回 false

7. 清理资源

dispose() 方法中清理 TextEditingController,以避免内存泄漏。

完整示例

以下是一个完整的示例,展示了如何使用 rt_formvalidator 进行表单验证:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Form Validation Example')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  [@override](/user/override)
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(labelText: 'Email'),
            validator: RtFormValidator.email('Please enter a valid email'),
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: RtFormValidator.required('Password is required'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证通过,处理表单数据
                print('Email: ${_emailController.text}');
                print('Password: ${_passwordController.text}');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    _emailController.dispose();
    _passwordController.dispose();
    super.dispose();
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!