掌握 Flutter 自定义表单必填项验证，有效保证表单数据完整性

2024-02-19 18:10:47

在软件开发中，表单是必不可少的元素，它允许用户输入数据并将其提交给服务器或应用程序。为了确保表单数据的完整性和准确性，表单验证是必不可少的过程，尤其是对于必填项，更需要严格的验证。Flutter 作为当下流行的跨平台移动开发框架，提供了强大的表单验证功能，本文将重点介绍如何实现 Flutter 中的自定义表单必填项验证。

一、Flutter 表单验证概述

Flutter 提供了强大的表单验证功能，它允许您通过表单验证器来定义验证规则。当用户提交表单时，Flutter 会自动对表单数据进行验证，如果验证失败，Flutter 会显示相应的错误信息。

二、Flutter 自定义表单必填项验证

导入必要的库

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

定义必填项验证器

bool validateRequired(String value) {
  return value.isNotEmpty;
}

创建表单

final _formKey = GlobalKey<FormState>();

Widget build(BuildContext context) {
  return Form(
    key: _formKey,
    child: Column(
      children: [
        TextFormField(
          validator: validateRequired,
          decoration: InputDecoration(
            labelText: '必填项',
          ),
        ),
        ElevatedButton(
          onPressed: () {
            if (_formKey.currentState.validate()) {
              // 表单验证通过
            } else {
              // 表单验证失败
              Fluttertoast.showToast(
                msg: '请填写所有必填项',
                toastLength: Toast.LENGTH_SHORT,
                gravity: ToastGravity.CENTER,
                timeInSecForIosWeb: 1,
                backgroundColor: Colors.red,
                textColor: Colors.white,
                fontSize: 16.0
              );
            }
          },
          child: Text('提交'),
        ),
      ],
    ),
  );
}