Flutter表单验证插件simple_form_field_validator的使用

Flutter表单验证插件simple_form_field_validator的使用

simple_form_field_validator 是一个用于轻松验证表单字段的简单工具。它可以帮助开发者快速实现常见的表单验证逻辑,例如非空检查、邮箱格式验证等。

使用示例

以下是一个完整的示例,展示如何在 Flutter 应用中使用 simple_form_field_validator 插件进行表单验证。

完整代码示例

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('simple_form_field_validator 示例'),
        ),
        body: const Center(
          child: FormExample(),
        ),
      ),
    );
  }
}

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

  @override
  _FormExampleState createState() => _FormExampleState();
}

class _FormExampleState extends State<FormExample> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final TextEditingController _emailController = TextEditingController();

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('表单验证通过!')),
      );
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('表单验证失败,请检查输入!')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Email 字段
            TextFormField(
              controller: _emailController,
              decoration: const InputDecoration(
                labelText: '请输入注册或登录的电子邮件地址',
                hintMaxLines: 2,
              ),
              keyboardType: TextInputType.emailAddress,
              textCapitalization: TextCapitalization.none,
              textInputAction: TextInputAction.send,
              validator: SValidator.notEmpty(
                      msg: '请填写有效的电子邮件地址') +
                  SValidator.email(msg: '请填写有效的电子邮件地址')
                  as String? Function(String?)?,
            ),
            const SizedBox(height: 20),

            // 提交按钮
            ElevatedButton(
              onPressed: _submitForm,
              child: const Text('提交表单'),
            ),
          ],
        ),
      ),
    );
  }
}

代码说明

  1. 导入插件

    import 'package:simple_form_field_validator/simple_form_field_validator.dart';
    

    导入 simple_form_field_validator 插件以使用其提供的验证器。

  2. 定义表单键

    final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
    

    使用 GlobalKey 来管理表单状态。

  3. 定义控制器

    final TextEditingController _emailController = TextEditingController();
    

    使用 TextEditingController 来控制文本框的输入内容。

  4. 表单验证逻辑

    void _submitForm() {
      if (_formKey.currentState!.validate()) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('表单验证通过!')),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('表单验证失败,请检查输入!')),
        );
      }
    }
    

    当用户点击提交按钮时,调用 _submitForm 方法,通过 validate() 方法检查表单是否有效。

  5. 表单字段配置

    TextFormField(
      controller: _emailController,
      decoration: const InputDecoration(
        labelText: '请输入注册或登录的电子邮件地址',
        hintMaxLines: 2,
      ),
      keyboardType: TextInputType.emailAddress,
      textCapitalization: TextCapitalization.none,
      textInputAction: TextInputAction.send,
      validator: SValidator.notEmpty(
              msg: '请填写有效的电子邮件地址') +
          SValidator.email(msg: '请填写有效的电子邮件地址')
          as String? Function(String?)?,
    )
    

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

1 回复

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


simple_form_field_validator 是一个用于简化 Flutter 表单验证的插件。它提供了一种简单的方式来验证表单字段,并且可以轻松地集成到现有的 Flutter 表单中。

安装

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

dependencies:
  flutter:
    sdk: flutter
  simple_form_field_validator: ^1.0.0

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

使用步骤

1. 导入包

import 'package:simple_form_field_validator/simple_form_field_validator.dart';

2. 创建表单

在 Flutter 中,你通常会使用 FormTextFormField 来创建表单。你可以使用 SimpleFormFieldValidator 来简化验证逻辑。

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: SimpleFormFieldValidator.email(),
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: SimpleFormFieldValidator.password(),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证通过,执行提交操作
                print('Form is valid');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

3. 验证规则

SimpleFormFieldValidator 提供了一些常用的验证规则,例如:

  • email(): 验证电子邮件地址。
  • password(): 验证密码(默认至少 6 个字符)。
  • required(): 验证字段是否为空。
  • minLength(int minLength): 验证字段的最小长度。
  • maxLength(int maxLength): 验证字段的最大长度。
  • match(String valueToMatch): 验证字段是否与指定值匹配。

你也可以自定义验证规则:

validator: (value) {
  return SimpleFormFieldValidator.custom(
    value,
    (val) {
      if (val == null || val.isEmpty) {
        return 'This field is required';
      }
      if (val.length < 5) {
        return 'Must be at least 5 characters';
      }
      return null;
    },
  );
}

示例

以下是一个完整的示例,展示了如何使用 simple_form_field_validator

import 'package:flutter/material.dart';
import 'package:simple_form_field_validator/simple_form_field_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('Simple Form Validator 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: SimpleFormFieldValidator.email(),
          ),
          TextFormField(
            controller: _passwordController,
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
            validator: SimpleFormFieldValidator.password(),
          ),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // 表单验证通过,执行提交操作
                print('Form is valid');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}
回到顶部