Flutter表单验证插件flrx_validator的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter表单验证插件flrx_validator的使用

flrx_validator 是一个基于Flutter设计的流畅API验证器,旨在促进代码复用。它高度可扩展、模块化且易于测试。

安装

在您的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  flrx_validator: ^0.6.0

使用

文档

更多关于 Flrx Validator 和规则的信息,请参阅官方文档

内置规则

规则 参数 描述
AnyRule ruleList 当任何一个规则通过时即通过,适用于用户名/邮箱字段等
EachRule ruleList 所有规则都通过时才通过,并返回所有规则的验证消息,适用于密码字段等
EmailRule - 字符串是电子邮件时通过
InRule acceptedList 值在给定列表中时通过
MaxLengthRule maxLength 字符串长度小于给定长度时通过
MinLengthRule minLength 字符串长度大于给定长度时通过
NotInRule rejectedList 值不在给定列表中时通过
RegexRule regex 值匹配给定正则表达式时通过
RequiredRule - 值不为空或null时通过

如果找不到您需要的规则,请提出问题或创建Pull Request。

示例

下面是一个简单的示例,展示了如何使用 flrx_validator 来验证表单字段:

import 'package:flutter/material.dart';
import 'package:flrx_validator/flrx_validator.dart';
import 'package:flrx_validator/rules/email_rule.dart';
import 'package:flrx_validator/rules/required_rule.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Form Validation Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Form Validation Demo'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(labelText: 'Email'),
                  validator: Validator<String>(
                    rules: [RequiredRule(), EmailRule()],
                  ).validate,
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    // 验证逻辑
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这个示例中,我们创建了一个包含电子邮件输入框的简单表单,并使用了 flrx_validator 提供的 RequiredRuleEmailRule 来验证输入内容。当用户点击提交按钮时,可以根据实际需求实现具体的验证逻辑。

注意:上述代码片段仅为演示目的,实际应用中应根据具体需求调整和完善代码。


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

1 回复

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


当然,flrx_validator 是一个流行的 Flutter 插件,用于简化表单验证过程。下面是一个使用 flrx_validator 进行表单验证的代码示例。

首先,确保在 pubspec.yaml 文件中添加 flrx_validator 依赖:

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

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例,展示如何使用 flrx_validator 进行表单验证:

import 'package:flutter/material.dart';
import 'package:flrx_validator/flrx_validator.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 flrx_validator'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

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

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

  late FormBloc _formBloc;

  @override
  void initState() {
    super.initState();
    _formBloc = FormBloc(
      validators: [
        FieldValidator.email(field: 'email', message: 'Invalid email'),
        FieldValidator.minLength(field: 'password', length: 6, message: 'Password must be at least 6 characters long'),
      ],
    );
    _formBloc.addListener(() {
      if (_formBloc.isValid) {
        // Handle valid form submission
        print('Form is valid');
      } else {
        // Handle invalid form state
        print('Form is invalid');
      }
    });
  }

  @override
  void dispose() {
    _controllerEmail.dispose();
    _controllerPassword.dispose();
    _formBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            controller: _controllerEmail,
            decoration: InputDecoration(labelText: 'Email'),
            validator: (value) {
              return _formBloc.validateField('email') ?? null;
            },
            onChanged: (value) {
              _formBloc.updateField('email', value);
            },
          ),
          SizedBox(height: 16),
          TextFormField(
            controller: _controllerPassword,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: (value) {
              return _formBloc.validateField('password') ?? null;
            },
            onChanged: (value) {
              _formBloc.updateField('password', value);
            },
          ),
          SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              if (_formBloc.isValid) {
                // Submit form
                print('Submitting form...');
                // Optionally reset the form
                _formBloc.reset();
              } else {
                // Validate form
                _formBloc.validate();
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的表单,其中包含两个字段:Email 和 Password。我们使用 FormBloc 来管理表单状态和验证逻辑。FormBloc 接受一个 validators 列表,其中每个验证器都定义了某个字段的验证规则。

我们为每个 TextFormField 添加了 validatoronChanged 回调。validator 回调使用 _formBloc.validateField 方法来获取验证消息(如果有的话),而 onChanged 回调则使用 _formBloc.updateField 方法来更新字段值。

在提交按钮的 onPressed 回调中,我们首先检查 _formBloc.isValid,如果表单有效,则执行提交逻辑;否则,调用 _formBloc.validate 方法来触发验证。

这个示例展示了如何使用 flrx_validator 插件来简化 Flutter 表单验证的过程。你可以根据需要添加更多的字段和验证规则。

回到顶部