Flutter表单验证插件my_form

Flutter表单验证插件my_form_validator的使用

特性

邮箱验证
密码验证
手机号码验证
非空字符串验证

使用方法

在 pubspec.yaml 文件中添加依赖：

dependencies:
  my_form_validator:
    path: ../my_form_validator

完整示例代码

以下是一个完整的示例，展示了如何使用 my_form_validator 插件进行表单验证。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("表单验证示例"),
        ),
        body: Padding(
          padding: 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>();
  String _email;
  String _password;

  void _submit() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      Scaffold.of(context).showSnackBar(
        SnackBar(content: Text("表单提交成功")),
      );
    } else {
      Scaffold.of(context).showSnackBar(
        SnackBar(content: Text("表单验证失败")),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        children: [
          TextFormField(
            decoration: InputDecoration(labelText: "邮箱"),
            validator: (value) {
              if (!FormValidator.isEmail(value)) {
                return "请输入有效的邮箱地址";
              }
              return null;
            },
            onSaved: (value) {
              _email = value;
            },
          ),
          TextFormField(
            decoration: InputDecoration(labelText: "密码"),
            obscureText: true,
            validator: (value) {
              if (!FormValidator.isPassword(value)) {
                return "密码至少包含8个字符，包括数字和字母";
              }
              return null;
            },
            onSaved: (value) {
              _password = value;
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _submit,
            child: Text("提交"),
          )
        ],
      ),
    );
  }
}

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

itying888 1楼

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

my_form_validator 是一个用于简化 Flutter 表单验证的插件。它提供了一种简单的方式来验证表单字段，并可以轻松地集成到你的 Flutter 应用中。下面是如何使用 my_form_validator 的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 my_form_validator 插件的依赖：

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

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

2. 导入包

在你的 Dart 文件中导入 my_form_validator 包：

import 'package:my_form_validator/my_form_validator.dart';

3. 创建表单验证器

你可以使用 MyFormValidator 来创建表单验证器。以下是一个简单的例子：

final formValidator = MyFormValidator(
  rules: {
    'email': [
      RequiredRule(errorText: 'Email is required'),
      EmailRule(errorText: 'Invalid email format'),
    ],
    'password': [
      RequiredRule(errorText: 'Password is required'),
      MinLengthRule(minLength: 6, errorText: 'Password must be at least 6 characters'),
    ],
  },
);

4. 绑定表单字段

在你的表单中，将每个字段与验证器绑定。例如，使用 TextFormField：

TextFormField(
  decoration: InputDecoration(labelText: 'Email'),
  validator: (value) => formValidator.validate('email', value),
  onSaved: (value) {
    // 保存表单数据
  },
),
TextFormField(
  decoration: InputDecoration(labelText: 'Password'),
  obscureText: true,
  validator: (value) => formValidator.validate('password', value),
  onSaved: (value) {
    // 保存表单数据
  },
),

5. 处理表单提交

在表单提交时，调用 formValidator.validateForm 方法来验证整个表单：

final _formKey = GlobalKey<FormState>();

void _submitForm() {
  if (_formKey.currentState!.validate()) {
    _formKey.currentState!.save();
    // 处理表单提交逻辑
  }
}

@override
Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: [
        // 表单字段
        TextFormField(
          decoration: InputDecoration(labelText: 'Email'),
          validator: (value) => formValidator.validate('email', value),
          onSaved: (value) {
            // 保存表单数据
          },
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'Password'),
          obscureText: true,
          validator: (value) => formValidator.validate('password', value),
          onSaved: (value) {
            // 保存表单数据
          },
        ),
        ElevatedButton(
          onPressed: _submitForm,
          child: Text('Submit'),
        ),
      ],
    ),
  );
}

6. 自定义验证规则

你可以通过继承 Rule 类来创建自定义验证规则：

class CustomRule extends Rule {
  CustomRule({required String errorText}) : super(errorText: errorText);

  @override
  bool isValid(String? value) {
    // 自定义验证逻辑
    return value != null && value.contains('custom');
  }
}

然后在 MyFormValidator 中使用这个自定义规则：

final formValidator = MyFormValidator(
  rules: {
    'custom_field': [
      CustomRule(errorText: 'Custom validation failed'),
    ],
  },
);

7. 处理异步验证

如果需要异步验证，可以使用 AsyncRule：

class AsyncCustomRule extends AsyncRule {
  AsyncCustomRule({required String errorText}) : super(errorText: errorText);

  @override
  Future<bool> isValid(String? value) async {
    // 异步验证逻辑
    await Future.delayed(Duration(seconds: 1));
    return value != null && value.contains('async');
  }
}

然后在 MyFormValidator 中使用这个异步规则：

final formValidator = MyFormValidator(
  rules: {
    'async_field': [
      AsyncCustomRule(errorText: 'Async validation failed'),
    ],
  },
);